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
上一篇: canvas离屏技术与放大镜实现
下一篇: 微信小程序url传参写变量的方法