Reactjs + Webpack + CSS:如何仅对特定文件夹内的所有 css 文件应用模块明智的类映射
我添加了下面的代码但不起作用
{
test: /.css$/i,
use: [
"style-loader",
//"css-loader"
{
loader: "css-loader",
options: {
importLoaders : 1,
modules: {
//localIdentName: "[name][local][hash:base64:5]",
//localIdentContext: path.resolve(dirname, "src/styles"),
mode: "local",
auto: true,
exportGlobals: true,
localIdentName: "[name][local]__[hash:base64:5]",
localIdentContext: path.resolve(__dirname, "src/styles"),
localIdentHashSalt: "my-custom-hash",
namedExport: true,
exportLocalsConvention: "camelCase",
exportOnlyLocals: false,
},
sourceMap: true,
},
}
],
},
我的Reactjs文件夹结构示例如下
src
styles // Webpack dynamic class should apply for all classes inside this only
contact.css
about.css
global.css // Dont apply webpack dynamic class
我已经使用以下代码实现了
{
test: /\.(css|scss)$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
modules: {
localIdentName: "[name]__[local]___[hash:base64:5]",
},
sourceMap: false
}
}
],
include: /\.module\.css$/
},
{
test: /\.(css|scss)$/,
use: [
'style-loader',
//'css-loader'
{
loader: 'css-loader',
options: {
sourceMap: false
}
}
],
exclude: /\.module\.css$/
},
注意:应用模块的 css 文件的文件名应为 [yourname].module.css,并将其包含在组件中 例如AboutComponent和COtactComponent添加css如下 about.module.css 和 contact.module.css