webpack混用css modules

[xianzou]

webpack混用css modules

项目中开启css modules后，需要处理一些不想被转译成css modules,比如一些node_module中的包，或者一些插件里面的包；

示例：常见的css-loader配置：

const ruleUseArr  = [],sassLoader  = [];

if(process.env.NODE_ENV === 'production'){
    const miniCssExtractPlugin = new MiniCssExtractPlugin({
    	filename: 'index.css',
    	chunkFilename: '[id].css',
  	});
  	ruleUseArr.push(MiniCssExtractPlugin.loader);
}else{
    ruleUseArr.push({
    	loader: 'style-loader', // 将 JS 字符串生成为 style 节点
  	});
}

sassLoader.push({
  loader: 'sass-loader', // 将 Sass 编译成 CSS
  options: {
    outputStyle: 'expanded',
    sourceMap: true,
  },
});

module.exports = {
    module:{
       rules:[
            {
                test: /\.(sa|sc|c)ss$/,
                exclude: [/node_modules/]
                use: [
                  ...ruleUseArr,
                  {
                    loader: 'css-loader',
                    options: {
                      modules: true,
                      localIdentName: '[local]__[hash:base64:5]',
                    },
                  },
                  'postcss-loader',
                  ...sassLoader,
                ],
            }
           .....
       ] 
    }
}

从上面的示例可以看出，所有.css都会被css modules，假如我们在 lib和bin的文件下有需要使用的.css文件，但是不需要被css modules，那就需要修改：

方案一：

const ruleUseArr  = [],sassLoader  = [];

if(process.env.NODE_ENV === 'production'){
    const miniCssExtractPlugin = new MiniCssExtractPlugin({
    	filename: 'index.css',
    	chunkFilename: '[id].css',
  	});
  	ruleUseArr.push(MiniCssExtractPlugin.loader);
}else{
    ruleUseArr.push({
    	loader: 'style-loader', // 将 JS 字符串生成为 style 节点
  	});
}

sassLoader.push({
  loader: 'sass-loader', // 将 Sass 编译成 CSS
  options: {
    outputStyle: 'expanded',
    sourceMap: true,
  },
});

module.exports = {
    module:{
       rules:[
            {
                test: /\.(sa|sc|c)ss$/,
                exclude: [/node_modules/, /lib/, /bin/], //增加排除目录
                use: [
                  ...ruleUseArr,
                  {
                    loader: 'css-loader',
                    options: {
                      modules: true,
                      localIdentName: '[local]__[hash:base64:5]',
                    },
                  },
                  'postcss-loader',
                  ...sassLoader,
                ],
             },
           	 // 新增制定规则的规则来处理对应的文件下的样式文件
             {
                test: /\.css$/,
                include: [/lib/, /bin/], 
                use: [
                  ...ruleUseArr,
                  {
                    loader: 'css-loader'
                  },
                  'postcss-loader',
                  ...sassLoader,
                ],
             },
           .....
       ] 
    }
}

当然 还可以参照create-react-app的做法，使用关键字匹配来做：

方案二：

{
    test: /\.module\.scss$/,
    use:[
        ...
    ]
}

这样所有的包含module的文件都会被css modules处理，不包含的就普通处理。