Vue3配置bem样式架构的代码详解

// bem 架构
$namespace: "vat" !default; //   命名空间（可自定义，看心情）
$block-sel: "-" !default; //    块级元素与命名空间之间的连接符（可自定义，看心情）
$element-sel: "__" !default; //    元素与块级元素之间的连接符（可自定义，看心情）
$modify-sel: "--" !default; //    修饰符与元素之间的连接符（可自定义，看心情）

// 定义混入指令
@mixin block($block) {
  // 创建一个类名变量
  $B: #{$namespace + $block-sel + $block};
  //   取动态类名赋值样式
  .#{$B} {
    @content; //  占位符,用于填写真实想要开发的样式
  }
}

// 定义混入指令
@mixin element($element) {
  // 使用@at-root和#{&}可以引用父（在Sass中总是引用父选择器）和插值，可以嵌套，做一些其他的事情
  @at-root {
    #{& + $element-sel + $element} {
      @content; //  占位符
    }
  }
}

// 定义混入指令
@mixin modify($modify) {
  // 使用@at-root和#{&}可以引用父（在Sass中总是引用父选择器）和插值，可以嵌套，做一些其他的事情
  @at-root {
    #{& + $modify-sel + $modify} {
      @content;//  占位符
    }
  }
}

// 定义混入指令
@mixin bfc {
  height: 100%;
  width: 100%;
  overflow: hidden;
}

 css: {
  preprocessorOptions: {
      scss: {
          additionalData: '@import "./src/styles/bem.scss";'
      }
  },