如何在 vue 3 vite 中使用 sass 扩展？答案

【问题标题】：How to use sass extend in vue 3 vite?如何在 vue 3 vite 中使用 sass 扩展？
【发布时间】：2021-11-06 19:42:35
【问题描述】：

例如，我在app.scss 中导入了 bootstrap，

@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/bootstrap.scss";

如果我这样做的话，现在在一个组件中，

<style scoped lang="scss">
.text {
  @extend .text-white;
}
</style>

我收到以下错误，

[plugin:vite:css] The target selector was not found.
Use "@extend .text-white !optional" to avoid this error.
  ╷
8 │   @extend .text-white;
  │   ^^^^^^^^^^^^^^^^^^^
  ╵
  src/components/Navbar.vue 8:3  root stylesheet

【问题讨论】：

标签： vue.js sass vuejs3 vite

【解决方案1】：

在vite.config.js 中为 CSS 预处理器添加一个选项：

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `@import "bootstrap/scss/bootstrap";`
    }
  }
},

有关更多信息，您可以查看官方文档https://vitejs.dev/config/#css-preprocessoroptions

【讨论】：