全局css的终结——css module
youngwind opened this issue · comments
前言
长久以来,css的全局入侵性一直没得到有效的解决,反观js,早有Browserify和webpack等使代码变得模块化。问题的核心在于全局类的命名冲突上,幸好,webpack的css-loader提供了这样的一个解决方案,名字叫做 CSS Module
假设我们有大概下面这样的代码
// webpack.config.js
module: {
loaders: [
{test: /\.scss$/, loader: 'style!css!postcss-loader!sass?sourceMap'},
]
},
// 组件 picker.js
var React = require("react");
require("./picker.scss");
var Picker = React.createClass({
render: function () {
var value = this.props.value;
return (
<h1 className="demo">{value}</h1>
);
}
});
module.exports = Picker;
//picker.scss 组件的样式
.demo {
color: pink;
}
如何应用css module?
// webpack.config.js
// 看到区别了吗?在于css-loader后面多了一些参数!
module: {
loaders: [
{test: /\.scss$/, loader: 'style!css?modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss-loader!sass?sourceMap'},
]
},
// 组件picker.js
var React = require("react");
// 区别在与这行!!
var styles = require("./picker.scss");
var Picker = React.createClass({
render: function () {
var value = this.props.value;
return (
// 还有这行!!如果有了解过react-native的肯定会发现这写法简直跟react-native如出一辙。
<h1 className={styles.demo}>{value}</h1>
);
}
});
module.exports = Picker;
//picker.scss 组件的样式
// 没错,scss文件不需要任何修改
.demo {
color: pink;
}
最后渲染的DOM元素是这样的。
因为css最后被编译成下面的这样子了。
结论
css module会确保每个类的全局唯一性,因此,给组件写样式的时候再也不用担心出现样式冲突了!
参考资料: