vue.js - 如何在 vue 3 vite 中使用 sass 扩展？

Question

例如，我在 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

Answer 1

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

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

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