Vue3+Vite项目中使用Sass @extend继承Bootstrap类报错如何解决？

• 组件的scoped样式和全局样式默认编译隔离，Sass处理当前组件样式时，找不到你在全局app.scss里引入的Bootstrap定义的.text-white选择器，因此抛出目标选择器不存在的错误。
• 你没有配置Vite全局注入公共Sass资源，每个组件的SCSS样式都是独立编译单元，默认不会自动引入全局定义的Bootstrap SCSS规则。

方案1：配置Vite自动全局注入Bootstrap SCSS #

修改项目根目录下的vite.config.js/vite.config.ts配置文件，添加Sass预处理全局注入规则，这样Bootstrap的SCSS定义会自动注入到所有SCSS样式文件头部，所有组件都可以直接用@extend继承Bootstrap的类：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        // 末尾必须加分号，避免拼接代码出现语法错误
        additionalData: `
          @import "bootstrap/scss/functions";
          @import "bootstrap/scss/variables";
          @import "bootstrap/scss/mixins";
          @import "bootstrap/scss/bootstrap.scss";
        `
      }
    }
  }
})

配置完成后删除app.scss里的Bootstrap引入代码，避免重复打包样式。

方案2：组件内按需引入需要的SCSS模块 #

如果不想全局注入全部Bootstrap SCSS，仅在需要用到@extend的组件里单独引入对应模块即可：

<style scoped lang="scss">
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/utilities/text";

.text {
  @extend .text-white;
}
</style>

临时兼容方案 #

如果仅需要避免编译报错，不强制要求必须继承到目标样式，可以按照报错提示添加!optional标识，找不到目标选择器时Sass会自动跳过该规则，不会阻断编译：

.text {
  @extend .text-white !optional;
}

注意：如果不需要样式隔离，可以直接去掉style标签的scoped属性，也可以直接继承全局引入的Bootstrap类，但要注意自定义类名不要和全局类名冲突。

内容的提问来源于stack exchange，提问作者Axel