我是否必须观看并将 sass 编译为 css 才能在 Vue 中使用它？答案

【问题标题】：Do I have to watch and compile sass to css in order to use it in Vue?我是否必须观看并将 sass 编译为 css 才能在 Vue 中使用它？
【发布时间】：2021-09-11 03:42:35
【问题描述】：

我刚开始使用 Vue 进行一个项目，我想使用 Sass。我已经完成了全局设置 Sass 所需的一切，但似乎 vue 无法识别 sass 文件。我是否必须观看然后将 sass 编译为 css 才能使其工作？

我安装了 Node-sass 和 vue-loader
设置 vue.config.js

但是每当我启动Vue服务器时，我都会收到一条错误消息，说我在sass文件中设置的变量没有定义，我在_variables.scss中定义了它们

这是 Vue.config.js

module.exports = {
 css: {
      loaderOptions: {
           sass: {
                additionalData: `
                @import "@/assets/sass/abstracts/_mixins.scss";
                @import "@/assets/sass/abstracts/_variables.scss";
                @import "@/assets/sass/base/_base.scss";
                @import "@/assets/sass/layouts/_sidebar.scss";
                `
           }
      }
 }

}

我收到以下错误：-


 error  in ./src/components/SideBar.vue?vue&type=style&index=0&id=3eca7188&lang=scss

Syntax Error: SassError: Undefined variable: "$color-main".
        on line 10 of src/components/SideBar.vue
>>   background: $color-main;

   --------------^

【问题讨论】：

标签： vue.js sass node-sass

【解决方案1】：

如果您使用的是 vue-cli 或 vite，则无需执行任何操作，只需使用 scss。

如果在所有 sfc 中导入变量，https://css-tricks.com/how-to-import-a-sass-file-into-every-vue-component-in-an-app/ 遵循此。

【讨论】：

感谢您的澄清。我的 vue.config.js 被放置在工作区文件夹而不是 vue 项目文件夹中。现在一切都解决了。