Question

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

我发现here（css技巧）和here（各种学校），我要做的就是在命令行中安装运行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"和{{1 }} data

我认为问题出在这里，因为根据我的sass-loader版本为6.13.4，

"sass-loader": "^7.*.*"

我运行npm sass-loader -v时没有收到任何消息，但版本仍为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年全球范围内将Scss文件添加到Vue项目

2 个答案: