CSS Modules In Webpack

1）从形式上看，CSS Modules 是将CSS中的选择器转换为变量，然后在DOM中引用变量来引入样式。

2）从效果上看，CSS Modules 可以将CSS选择器名字转成随机字符串，保证选择器同名也不会冲突。

3）在Webpack中使用，需要为css-loader增加modules

// webpack 1.x

{
    test: /\.css$/,
    loader: "style-loader!css-loader?modules"
},


// webpack 2.x
{
  test: /\.css$/,
  use: [
    {
      loader: 'css-loader',
      options: {
        modules: true,
      }
    }
  ]
}

4）代码引入方式

// CSS 
.contentTitle {
  color: red;
}

// React
import React from 'react';
import style from './App.css';

export default () => {
  return (
    <h1 className={style.contentTitle}>
      Hello World
    </h1>
  );
};

5、生成的页面中选择器变化

// HTML
<h1 class="_3zyde4l1yATCOkgn-DBWEL">
  Hello World
</h1> 

// CSS
._3zyde4l1yATCOkgn-DBWEL {
  color: red;
}

6、node_modules内代码不处理

{
　　test: /\.css$/,
　　loader: 'style-loader!css-loader?modules',
　　exclude:[path.resolve(__dirname, '..', 'node_modules')]
}, {
　　test: /\.css$/,
　　loader: 'style-loader!css-loader',
　　include:[path.resolve(__dirname, '..', 'node_modules')]
},

 

https://github.com/webpack-contrib/css-loader#modules

https://www.cnblogs.com/walls/p/9153555.html

http://www.ruanyifeng.com/blog/2016/06/css_modules.html

https://segmentfault.com/a/1190000004990977

https://github.com/camsong/blog/issues/5

https://github.com/webpack-contrib/css-loader/issues/282