sass

node-sass与node的版本对应表(可能不是最新的)

参考自 => 最新的

NodeJS Supported node-sass version Node Module
Node 20 9.0+ 115
Node 19 8.0+ 111
Node 18 8.0+ 108
Node 17 7.0+, <8.0 102
Node 16 6.0+ 93
Node 15 5.0+, <7.0 88
Node 14 4.14+, <9.0 83
Node 13 4.13+, <5.0 79
Node 12 4.12+, <8.0 72
Node 11 4.10+, <5.0 67
Node 10 4.9+, <6.0 64
Node 8 4.5.3+, <5.0 57
Node <8 <5.0 <57

我的node版本

1
v16.14.0

我的node-sass版本和sass-loader版本

1
2
"node-sass": "^6.0.1",
"sass-loader": "^10.2.0"
1
2
3
4
5
6
7
//默认安装最新版本
npm install node-sass --sava-dev
npm install sass-loader --save-dev
 
//指定安装版本
npm install node-sass@6.0.1 --sava-dev
npm install sass-loader@10.2.0 --save-dev

sass引入全局公共文件报错

语法错误：ValidationError：选项对象无效。Sass Loader已使用与API架构不匹配的选项对象进行初始化。 -选项具有未知属性“preendData”。

1
2
3
Syntax Error: ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema.
 - options has an unknown property 'prependData'. These properties are valid:
   object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }

解决办法: 将 prependData 属性改为 additionalData

1
2
3
4
5
6
7
8
9
10
11
12
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false, // 关闭eslint检测
  css:{
    loaderOptions:{
      sass:{
        additionalData: `@import "./public.scss";` //引入全局变量
      }
    }
  }
})