使用 sass 编写 bem 风格的css。
该方案是 element-ui
框架中的,本人只是根据实践经验对此进行了一些修改。
自定义可参考
sass
变量声明语法。
config | 含义 | 默认值 |
---|---|---|
$namespace | class 前缀(命名空间) | app |
$block-separator | Block 分隔符 | - |
$element-separator | Element 分隔符 | -- |
$modifier-separator | Modifier 分隔符 | __ |
$state-prefix | 状态样式前缀 | is- |
mixin | 含义 |
---|---|
b | BEM 中的 Block |
e | BEM 中的 Element |
m | BEM 中的 Modifier |
spec-selector | 用于自定义嵌套样式 |
when | 定义一个状态样式 |
- 安装:
npm install sass-bem -D
- 使用
/* demo.scss */
@import 'sass-bem/index.scss';
@include b(demo){
/* rules */
@include e(tip){
/* rules */
}
...
}
在任何一个
sass
文件中都可使用bem.scss
中的mixin
- 安装:
npm install sass-bem -D
- 安装:
npm install sass-resources-loader -D
- 配置
sass-resources-loader
:
module.exports = {
// ....
module: {
rules: [
// ....
{
test: /\.scss$/,
use: [
{
loader: 'sass-resources-loader',
options: {
sourceMap: true,
resources: [
'~sass-bem/index.scss'
]
}
}
]
}
],
}
};