vuecli依赖及知识点

1、sass :export

:export 是用于sass文件和js文件关联的，用此可以将sass中样式类似于es6语法中export导出，并在其他样式或者js文件中直接使用，但是 目前只适用于 webpack4 或者 node-sass v4.9及以上

 demo：

@/styles/common.scss

$primary:#ffffff;
$sideWidth: 100px;

:export {
  primary: $primary;
  sideWidth: $sideWidth;
}

 应用组件

 

2、vue.config.js loaderOptions 的 prependData 和 additionalData

主要是用来配置全局变量的，用法大致都一样，只是对应sass-loader版本不同， v8以下用的是data，v8用的是prependData， v10及以上用的是additionalData，目前一般安装最新的都是additionalData， 另外 在sass编译条件下@import不用加分号，scss编译条件下需要分号，注：scss语法也会在sass-loader下编译

demo：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "~@/assets/styles/common.sass"` // sass不需要加分号
      },
      scss: {
        additionalData: `@import "~@/assets/styles/common.scss";` // scss必须要加分号
      }
    }
  }
};

3、node-sass 安装失败

这种错误相信使用大家在改以前旧项目时经常遇到，很恼火，一般导致这问题的原因如下

1、没有配置npm镜像源，从国外访问太慢导致失败

解决方法：

npm config set registry https://registry.npm.taobao.org
set SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ && npm install node-sass

2、 node 版本 和 node-sass 不兼容

以前很多老项目开始的时候，可能node版本才v10，一般的都v14，现在node 16都出来了，要是你们项目里package.json没有锁定依赖具体版本，那么就会全下载最新的，那肯定兼容报错

以下在我在node-sass github收集的 ，想去看的链接如下

https://github.com/sass/node-sass/releases

Node版本	node-sass版本
12, 14, 16, 17	7.0.1
12, 14, 16, 17	7.0.0
12, 14, 15, 16	6.0.1
12, 14, 15, 16	6.0.0
10, 12, 14, 15	5.0.0
0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14	4.14.1
0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14	4.14.0
0.10, 0.12, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13	4.13.1
...	...

3、提示python啥的，然后安装失败

遇到这种问题，先别急，大概率就是node 版本 和 node-sass 不兼容，这时候先 uninstall node-sass，再将你的node_modules 移除掉，一般来说有错误日式也要一并删除掉，然后先对照我第二点，找到你对应的node-sass版本下载

总结一下：其实node-sass是导致vue项目安装出错最多的依赖，官方都不推荐了额，你在新建项目时，能选择dart-sass就选择dart-sass吧

4、sass-loader 安装报错

这依赖又跟上面node-sass版本紧密相关了，看吧 node-sass问题太多了，不过用了也没办法，总得解决一下，下面是部分 node-sass 与 sass-loader 关联版本

node-sass	sass-loader
4.3.0	4.1.1
4.7.2	7.0.3 7.3.1
4.14.1	7.3.1
5.0.0	7.2.0
6.0.1	10.0.1

---持续更新---