使用最新版本的 css-loader 和 Webpack 5.91.0,启用 cssModule 时导入的 CSS 模块始终是未定义的。 (这个问题已通过将 css-loader 降级到版本 5.0.0 得到解决。)那么,有谁知道如何使用最新版本的 css-loader (7.1.1) 配置 cssModules 吗?我认为可能有一个错误。
webpack.config.js
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { loader } = require('mini-css-extract-plugin');
const isProduction = process.env.NODE_ENV == 'production';
const stylesHandler = isProduction ? MiniCssExtractPlugin.loader : 'style-loader';
const config = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
},
devServer: {
open: true,
host: 'localhost',
},
plugins: [
new HtmlWebpackPlugin({
template: 'index.html',
}),
// Add your plugins here
// Learn more about plugins from https://webpack.js.org/configuration/plugins/
],
module: {
rules: [
{
test: /\.(js|jsx)$/i,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env', '@babel/preset-react']
}
}
},
{
test: /\.css$/i,
use: [stylesHandler,'css-loader'],
},
{
test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i,
type: 'asset',
},
// Add your rules for custom modules here
// Learn more about loaders from https://webpack.js.org/loaders/
],
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src')
},
extensions: ['.js', '.jsx'],
}
};
module.exports = () => {
if (isProduction) {
config.mode = 'production';
config.plugins.push(new MiniCssExtractPlugin());
} else {
config.mode = 'development';
}
return config;
};
应用程序.jsx
import React from "react";
import styles from "./app.module.css";
function App() {
console.log("styles-->", styles);
return <div className={styles?.red}>react-app</div>;
}
export default App;
请告诉我如何解决这个问题。
css-loader v7.0.0 中发生了重大变化。查看包的变更日志:css-loader 变更日志
如果您使用默认导入语法,而不是命名空间导入语法,您将得到未定义的结果。
import styles from './styles.scss' // Default Import
import * as styles from './styles.scss' // Namespace Import
如果您愿意,可以通过调整 webpack 配置中 css-loader 的选项来恢复使用默认导入语法:
module.exports = {
module: {
rules: [
{
test: /\.css$/i,
loader: "css-loader",
options: {
modules: {
namedExport: false,
exportLocalsConvention: 'as-is',
//
// or, if you prefer camelcase style
//
// exportLocalsConvention: 'camel-case-only'
},
},
},
],
},
};