vue.js - 2020年全球如何将scss文件添加到Vue项目

Question

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

我发现here（css技巧）和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"
  │  

如果发现这个 stackoverflow 帖子说根据我的 sass-loader 版本，我必须将其更改prependData为data，其中 prependData 是 for"sass-loader": "^8.0.2"和datafor"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

有谁知道我做错了什么？

我的仓库在这里

标签： vue.jsnpmsassvue-cli

Answer 1

在最新版本中sass-loader，data还是prependData不行。试试additionalData吧

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