使用 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'
]
}
}
]
}
],
}
};
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent