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

Posted 2023-02-22

【中文标题】2020年全球如何将scss文件添加到Vue项目

【英文标题】：How to add scss files to Vue project globally 2020

【发布时间】：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 *** 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 看看会发生什么吗？

哇！有效！！！非常感谢！

【参考方案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";`
      
    
...