2020年如何在全局Vue项目中添加scss文件

Question

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

我发现here(css tricks) and here（vue学校）我要做的就是在命令行安装sass-loader 运行ning npm i node-sass 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 Whosebug post 表示根据我的 sass-loader 版本，我必须将 prependData 更改为 data，其中 prependData 用于 [=20] =] 和 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

Answer 1

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

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

Answer 2

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

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

2020年如何在全局Vue项目中添加scss文件

How to add scss files to Vue project globally 2020

sass

npm

vue.js

vue-cli