在我的项目中,我安装了下拉树选择,我想为此使用自定义 css。但是,如果我在 webpack 配置中添加新规则,插件可以正常工作,但所有其他 css 都被混搭了。
如果我删除规则,那么所有其他 css 都可以正常工作,但是这个下拉树选择不能正常工作。
用国旗反应下拉树选择,所以在这种情况下,我必须添加一些自定义 CSS。
下面是我的 webpack 配置。那么你能告诉我我必须在我的 webpack 配置中添加/删除哪个规则吗?
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{
loader: 'css-loader'
}
]
}),
include: /node_modules[/\\]react-dropdown-tree-select/
},
// "postcss" loader applies autoprefixer to our CSS.
// "css" loader resolves paths in CSS and adds assets as dependencies.
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
{
test: /\.css$/,
use: [
require.resolve('style-loader'),
{
loader: require.resolve('css-loader'),
options: {
importLoaders: 1,
modules:true,
localIdentName:'[Name]__[local]__[has:base64:5]'
},
},
{
loader: require.resolve('postcss-loader'),
options: {
// Necessary for external CSS imports to work
// https://github.com/facebookincubator/create-react-app/issues/2677
ident: 'postcss',
plugins: () => [
require('postcss-flexbugs-fixes'),
autoprefixer({
browsers: [
'>1%',
'last 4 versions',
'Firefox ESR',
'not ie < 9', // React doesn't support IE8 anyway
],
flexbox: 'no-2009',
}),
],
},
},
],
},
plugins: [
new ExtractTextPlugin("styles.css"),