React 项目一大特色就是组件化模块,但是css模块化之前一直没有接触过,google了一些资料,发现可以通过设置webpack.config.js来应用CSS Modules
简单的设置:
module.exports = {
devtool: 'eval-source-map',
entry: ...,
output: {...},
module: {
loaders: [
...,
{
test: /\.css$/,
loader: 'style!css?modules'
}
]
},
devServer: {...}
}
然后新建一个css文件(root.css)
.root {
background-color: #eee;
padding: 10px;
border: 3px solid #ccc;
}
在js文件中引入css文件
import styles from './root.css';
class Greeter extends Component{
render() {
return (
<div className={styles.root}>
</div>
);
}
}
export default Greeter
就ok了~~
进阶
1.支持scss
module.exports = {
devtool: 'eval-source-map',
entry: ...,
output: {...},
module: {
loaders: [
...,
{
test: /\.scss$/,
loader: 'style!css?modules!postcss!sass?sourceMap=true',
}
]
},
devServer: {...}
}
2.默认编译出来是hash值唯一引用名称,需要自定义clss名称(modules&localIdentName=xxx):
module.exports = {
devtool: 'eval-source-map',
entry: ...,
output: {...},
module: {
loaders: [
...,
{
test: /\.scss$/,
loader: 'style!css?modules&localIdentName=[path][name]__[local]!postcss!sass?sourceMap=true',
}
]
},
devServer: {...}
}
3.局部作用域和全局作用域:
CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。
产生局部作用域的唯一方法,就是使用一个独一无二的class的名字,不会与其他选择器重名。这就是 CSS Modules 的做法。
CSS Modules 允许使用:global(.className)的语法,声明一个全局规则。凡是这样声明的class,都不会被编译成哈希字符串。
:global(.title) {
color: green;
}
<h1 className="title">
Hello World
</h1>
4.与全局样式共存(使用webpack配置):
{
test: /\.scss$/,
loader: 'style!css?modules&localIdentName=[path][name]__[local]!postcss!sass?sourceMap=true',
exclude: [/node_modules/,/styles/]
},
{
test: /\.scss$/,
loader: 'style!css!sass?sourceMap=true',
include: /styles/
}
本文参考:
1.Appendix A: Webpack for React
2.CSS Modules 用法教程
3.CSS Modules 详解及 React 中实践