CSS Modules In Webpack

2018-09-01 05:49:47来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

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

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:JS刷剑指offer总结

下一篇:angularjs学习第八天笔记(指令作用域研究)