2020年全球如何将scss文件添加到Vue项目答案

【问题标题】：How to add scss files to Vue project globally 20202020年全球如何将scss文件添加到Vue项目
【发布时间】：2020-11-15 09:20:22
【问题描述】：

我正在尝试将全局 scss 变量添加到我的 vue 项目中。

我发现here(css tricks) 和here(vue school) 我要做的是在命令行中安装运行npm i node-sass sass-loader的sass-loader。

我的项目中还需要一个 vue.config.js 文件，其中包含以下内容：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "@/styles/_variables.scss";`
      }
    }
  }
};

_variables.scss 是我要全局导入的文件。

当我在我的项目中运行 npm run build 时，我收到此错误：

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: semicolons aren't allowed in the indented syntax.
  ╷
1 │ @import "@/styles/_variables.scss";
  │                                   ^
  ╵

如果我删除分号：

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected ";".
  ╷
1 │ @import "@/styles/_variables.scss"
  │

如果找到 this stackoverflow post 表示根据我的 sass-loader 版本，我必须将 prependData 更改为 data，其中 prependData 用于 "sass-loader": "^8.0.2"，data 用于 "sass-loader": "^7.*.*"

我认为问题出在此处，因为根据

，我的 sass-loader 版本是 6.13.4

npm sass-loader -v

当我运行npm update sass-loader 时，我没有收到任何消息，但版本仍然是 6.13.4

根据npm最新的sass-loader版本是9.0.2

有谁知道我做错了什么？

我的仓库是here

【问题讨论】：

我不确定这是否仍然是这样做的方法，但我知道在某些时候他们会拆分 sass 和 scss 选项。您可以尝试将loaderOptions.sass 更改为loaderOptions.scss 看看会发生什么吗？
哇！有效！！！非常感谢！

标签： vue.js npm sass vue-cli

【解决方案1】：

在sass-loader 的最新版本中，data 或prependData 将不起作用。改用additionalData

css: {
    loaderOptions: {
      scss: {
        additionalData: `
        @import "@/assets/styles/_responsive.scss";
        @import "@/assets/styles/_element-variables.scss";
        `
      },
   }
}

【讨论】：

【解决方案2】：

他们在 vue-cli 4.0.0-beta.3 中拆分 scss 和 sass 选项，请参阅 this github issue。

...
   loaderOptions: {
      scss: {
        prependData: `@import "@/styles/_variables.scss";`
      }
    }
...

【讨论】：