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

Question

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

我在这里(css技巧(和这里(vue-school(发现，我要做的是在命令行中安装运行npm i node-sass sass-loader的sass加载程序。

在我的项目中，我还需要一个包含以下内容的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加载程序版本，我必须将prependData更改为data，其中prependData用于"sass-loader": "^8.0.2"，data用于"sass-loader": "^7.*.*"

我认为问题出在这里，因为根据，我的sass加载程序版本是6.13.4

npm sass-loader -v

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

根据npm，最新的sass加载程序版本是9.0.2

有人知道我做错了什么吗？

我的存储库在这里

Answer 1

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

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

Answer 2

他们将scs&vue-cli 4.0.0-beta.3中的sass选项请参阅本期github。

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