Reactjs 为react下拉树添加自定义css选择所有其他css mashup

在我的项目中，我安装了下拉树选择，我想为此使用自定义css。然而，如果我在我的webpack配置中添加了一个新规则，插件可以正常工作，但是所有其他css都是混搭的

如果我删除了这个规则，那么所有其他css都可以正常工作，但是这个下拉树select不能正常工作

反应下拉树选择与国旗，所以在这种情况下，我必须添加一些自定义css

下面是我的网页配置。那么，你能告诉我我必须在我的网页配置中添加/删除哪个规则吗

{
    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"),

{
测试：/\.css$/,，
用法：ExtractTextPlugin.extract({
回退：“样式加载器”，
使用：[
{
加载器：“css加载器”
}
]
}),
包括：/node\u模块[/\\]反应下拉树选择/
},
//“postcss”加载程序将AutoRefixer应用于我们的CSS。
//“css”加载器解析css中的路径，并将资产添加为依赖项。
//“样式”加载器将CSS转换为注入标记的JS模块。
//在生产中，我们使用插件将CSS提取到文件中，但是
//在开发中，“样式”加载器支持CSS的热编辑。
{
测试：/\.css$/,，
使用：[
require.resolve（'style-loader'），
{
加载器：require.resolve（'css-loader'），
选项：{
进口装载机：1，
模块：对，
localIdentName:“[Name]。[local]。[has:base64:5]”
},
},
{
加载器：require.resolve（'postss-loader'），
选项：{
//外部CSS导入工作所必需的
// https://github.com/facebookincubator/create-react-app/issues/2677
标识：'邮政编码'，
插件：（）=>[
需要（'PostSS-flexbugs-fixes'），
自动刷新器({
浏览器：[
'>1%',
“最后4个版本”，
“Firefox ESR”，
'不是ie<9'，//React无论如何都不支持IE8
],
flexbox:‘no-2009’，
}),
],
},
},
],
}, 
插件：[
新的ExtractTextPlugin（“style.css”），

反应下拉树选择此处的作者

为了在组件的css之上使用您自己的css，您的网页包中需要有两条规则-一条用于导入组件样式，另一条用于导入样式

对于样式附带的任何react组件，通常都是这样。组件样式是预编译的，因此您需要告诉webpack不要对其运行任何进一步的处理

{
    test: /.css$/,
    use: ExtractTextPlugin.extract({
        fallback: 'style-loader',
        use: [{
            loader: 'css-loader'
        }]
    }),
    include: /node_modules[/\]react-dropdown-tree-select/
}, {
    test: /.css$/,
    // rest of your rule goes here
    include: ['src']  // or 'lib' or whatever folder your styles reside in
}

第一条规则通过以下条件匹配组件css
include:/node\u modules[/\]react下拉树select/
，因为我们不需要对其运行任何后期处理，所以我们只需通过css loader将其包括在内

第二条规则通过
include:['src']
条件匹配源代码中的样式，并允许您应用希望运行的任何加载程序

查看您的OP，我认为您缺少第二条规则中的
include
，因此，它也会应用于节点模块。请尝试筛选它，并告诉我这是否解决了您的问题

最后，我将在这里留下这个演示如何在这里包括带有国旗的自定义css，以防您看到它或将来可能会来寻找类似内容的读者。
一个没有网页包的解决方案。只有SCS。可以使用颜色


从“反应下拉树选择”导入下拉树选择；
导入“/data.scss”；
从“/data.json”导入数据；
......
onChange=（currentNode，selectedNodes）=>{
log（“路径：：”，currentNode.path）；
};
AssignObjectPath=（对象，堆栈）=>{
Object.keys（obj.forEach）（k=>{
const node=obj[k]；
if（节点类型==“对象”）{
node.path=stack？`${stack}.${k}`:k；
this.assignObjectPath（node，node.path）；
}
});
};
render（）{
这是。AssignObjectPath（数据）；
报税表（
);
}
/**
div.react-dropdown-tree-select
分区下拉列表
a、 下拉触发器
跨度
标签列表
li.标签项
输入
div.dropdown-content
根
li.node.tree
i、 折叠
标签
input.checkbox-item
span.node-label
*/
/*撤退，直到https://github.com/CompuIves/codesandbox-client/issues/174 解决*/
@字体{
字体系列：“材质图标”；
字体风格：普通；
字体大小：400；
src:url(https://fonts.gstatic.com/s/materialicons/v36/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2)格式（“woff2”）；
}
.材质图标{
字体系列：“材质图标”；
字体大小：正常；
字体风格：普通；
字体大小：24px；
线高：1；
字母间距：正常；
文本转换：无；
显示：内联块；
空白：nowrap；
换字：正常；
方向：ltr；
-webkit字体功能设置：“liga”；
-webkit字体平滑：抗锯齿；
}
.mdl演示{
.下拉触发器>范围：之后{
字体大小：12px；
颜色：金色；
}
.切换{
字体：普通18px/1“材质图标”；
颜色：蓝色；
空白：预处理；
保证金权利：4px；
光标：指针；
}
.切换：之后{
内容：“；
}
.toggle.collapsed:：after{
光标：指针；
内容：“\E5CF”；
垂直对齐：中间对齐；
浮动：对；
}
.toggle.expanded:：after{
光标：指针；
内容：“\E5CE”；
垂直对齐：中间对齐；
浮动：对；
}
/*复选框样式*/
.复选框项目{
位置：相对位置；
宽度：1em；
高度：1公厘；
保证金权利：0.75雷姆；
光标：指针；
-webkit外观：无；
-moz外观：无；
外观：无；
大纲：0；
垂直对齐：中间对齐；
}
.复选框项目：在{
内容：“；
位置：绝对位置；
左：0；
排名：0；
z指数：1；
宽度：100%；
身高：100%；
边框：2个实心草坪；
过渡：所有0.3秒轻松进入