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

Posted 2023-02-22

【中文标题】如何在 vue 3 vite 中使用 sass 扩展？

【英文标题】：How to use sass extend in vue 3 vite?

【发布时间】：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

【参考方案1】：

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

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

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