css-modules

css模块化的常规方案，配置简单；
原理： 在打包css文件前，通过css-loader将css命名后缀随机生成的hash值，达到命名空间(及通过命名不同来保障唯一性)的效果;

  1. // 源码 text.css
  2. .text{
  3.     color:#333
  4. }
  5. // 源码 jsx
  6. import styles from './text.css';
  7. <div className={styles.text}/>
  10. // 对应的bundle
  11. .text_htdu648s{
  12.     color:#333
  13. }
  14. <div class='text_htdu648s'>

配置简单，如：css-loader?modules&localIdentName=[name]_[hash:base64:8]’ 

  1.   module: {
  2.     rules:[
  3.              // ...others
  4.         {
  5.             test:/\.css$/,
  6.               use:['style-loader','css-loader?modules&localIdentName=[name]_[hash:base64:8]'],
  7.             exclude:/node_modules/
  8.         },
  9.       ]
  10.   }

顺便插一句，在Vue的css模板里 加一个scoped的属性，就可以开启css模块化

  1. // test.vue
  2. <template>
  3.  <div class='box'><div>
  4. </template>
  5. <js>
  6.   new Vue({
  7.       // ...
  8.   })
  9. </js>
  10. <css scoped>
  11. </css>

css in js

原理 ： 所谓css in js 其实就是最终打入到 标签的style属性

  1. <div style= {color: #ddd}>css in js</div>

当然，如果直接按上述方式写，可能有点累，所以我们期望是下面这个样子：

  1. //源码 test.css
  2. .text{
  3.     color:#ddd;
  4. }
  5. .box { height:80px; }
  7. // 源码 jsx
  8. import styles from './text.css'
  9. function(props){
  10.     return <p  style={styles.text} />  
  11. }
  15. // 打包后的bundle
  16.  <p style='color:#ddd;'></p>

它的优点是 更符合组件化的思想（每一个标签都可以看作是一个独立的小组件，它的css应该是与其他小组件解耦的），并且绝对不会起css冲突(因为用的style)；
而css-moudle这种加hash值来做命名空间的方式，则会有极小概率命名一致的现象(原css名字一致，随机生成的hash一致)。

postCss

postcss可以看作css的后处理——这么讲其实有失严谨，postCss就是一种处理css的手段。