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