Webpack css模块化的问题

#1

webpack配置中设置如下：

           {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                     use: [ {
                         loader: 'css-loader',
                         options: {
                             modules: true// 设置css模块化 名字随机处理
                         }
                     }]
                })
            }

配置 modules: true，在react中使用样式 通过这种方式： className={style.container}，
后来引入了别人写的组件，为了使用别人组件的样式，所以就把 modules 设置为 false, 别人组件的样式就能够成功使用了，但自己以前写的 className={style.container} 发现最终结果为 class = undefined。 有什么好的办法，兼容即能够正确使用别人的样式，也能够比较好的使用css模块化吗？

#2

less，sass都是挺好的模块化工具。

1 Like
#3

别人的组件指的是第三方库吗？如果是的话你可以在webpack配置中多增加一条规则，使用exclude和include去区分第三方库和你自己的业务代码里样式的处理规则

#4

巧了，刚遇到这个问题就看到你的帖子…我是这么解决的

import "!style-loader!css-loader!antd/dist/antd.css"
#5

能请你描述的清楚一点吗？怎么用别人的样式的？

是@import进来的，还是link进来的？

link进来，不会受到css modules的影响，直接className=“col-md-12”(bootstarp)

@import进来，注意用:global，css modules里面有将