Sass bem配置及使用

地址：www.npmjs.com/package/sas…

Install：npm i sass

1：新增bem文件（bem.scss）(如果是uni项目，直接在uni.scss文件中添加下面代码即可)

$namespace: 'yc' !default; //
$block: '-' !default; //块
$element: '__' !default; //元素
$modifier: '--' !default; //修饰符

@mixin b($block_name) {
  $B: #{$namespace + $block + $block_name};
  .#{$B} {
    @content; //占位符 会被替换成真正的样式
  }
}

@mixin e($element_name) {
  $selector: &;
  //跳出嵌套  否则会变成 .yc-block .yc-block__inner
  @at-root {
    #{$selector + $element + $element_name} {
      @content;
    }
  }
}

@mixin m($modifier_name) {
  $selector: &;
  @at-root {
    #{$selector + $modifier + $modifier_name} {
      @content;
    }
  }
}

2.全局引入   在vite.config中设置（注意文件路径）

export default defineConfig({
  plugins: [vue()],
  css:{
    preprocessorOptions: {
      scss: {
        additionalData: `@import "./src/assets/bem.scss";`
      }
    }
  }
})

3.实际使用

<template>
  <div>
    <div class="yc-text">
      测试一下哦
      <div class="yc-text__inner">el</div>
      <div class="yc-text--success">test</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
  @include b(text){
    color: red;
    @include e(inner) {
      color: #02a7f0;
    }
    @include m(success){
      color: green;
    }
  }
</style>

在uni中需要注意的是，在引入scss文件的时候 需要注意引入方式，否则会报错

1：错误引入方式

	@import url('@/static/style/yl-main.scss');

2：正确引入方式

	@import '@/static/style/yl-main.scss';