Open youngwind opened 8 years ago
长久以来,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; }
那么,最终渲染出来的DOM元素应该长这个样。
// 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会确保每个类的全局唯一性,因此,给组件写样式的时候再也不用担心出现样式冲突了! 参考资料:
前言
长久以来,css的全局入侵性一直没得到有效的解决,反观js,早有Browserify和webpack等使代码变得模块化。问题的核心在于全局类的命名冲突上,幸好,webpack的css-loader提供了这样的一个解决方案,名字叫做 CSS Module
假设我们有大概下面这样的代码
那么,最终渲染出来的DOM元素应该长这个样。
如何应用css module?
最后渲染的DOM元素是这样的。
因为css最后被编译成下面的这样子了。
结论
css module会确保每个类的全局唯一性,因此,给组件写样式的时候再也不用担心出现样式冲突了! 参考资料: