我正在使用
在本地对CSS文件进行范围界定modules: true,
localIdentName: "[name]__[local]_[hash:base64:5]"
在webpack.config.dev和prod.js中。我可以使用从'./Component.css'导入样式为组件定义的样式。 现在,我正在尝试使用react-select第三方组件。现在,该组件具有我要使用的预定义样式。要使用它,我按如下所示导入样式
导入“ react-select / dist / react-select.css”
但是样式没有被应用。如何为导入的组件启用预定义的样式。
答案 0 :(得分:4)
您可以使用resource query
来根据查询对CSS导入进行不同的处理。
通过这种方式,您可以使用?external
查询参数导入常规CSS。
module.exports = {
//...
module: {
rules: [
{
test: /.css$/,
oneOf: [
{
// import 'react-select/dist/react-select.css?external'
resourceQuery: /external/,
use: ['style-loader', 'css-loader']
},
{
use: ['style-loader', 'css-loader'],
options: {
modules: true,
localIdentName: '[name]__[local]_[hash:base64:5]'
}
}
]
}
]
}
};