vuecli3 配置全局sass/scss变量报错

最近在用vuecli3重写一个项目时，注意到了代码中的一个可优化的点，就是scss文件的重复引用。

 

如上图所看到的，同一个css样式书写了两遍。

为什么会出现上面的这种情况呢？

项目中有一个common.scss的通用样式文件，里面保存着一些抽离出来的公共样式，便于以后统一修改，但是之前的项目是在每一个需要用到通用样式的页面都进行的引入，因此就导致了该文件的重复引入。如图，是common.scss文件。

于是，就考虑到将该文件设置为全局引入一次，然后可以在各个页面直接使用，这个时候需要用到sass-loader进行预处理，可移步vue官网查看配置方法 https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8-loader-%E4%BC%A0%E9%80%92%E9%80%89%E9%A1%B9 

 

配置之后，npm run serve启动项目，发现报错，报错信息如下

sass-loader报错：
Module build failed (from ./node_modules/[email protected]@sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.

• options has an unknown property 'data'. These properties are valid:
• object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
• at validate (D:旧项目[email protected]@schema-utilsdistvalidate.js:49:11)
• at Object.loader (D:旧项目[email protected]@sass-loaderdistindex.js:36:28)

终于在查了很久之后发现这里的一个坑，就是在使用最新版本的sass-loader(version>=8.0.0)的时候 data 这个配置已经不再支持，这里是本次更新的issus(https://github.com/webpack-contrib/sass-loader/issues/760 )，而是使用 prependData 代替，所以，配置如下

 

配置完成后，看下效果，common.scss中的样式果然没有重复的了

 

题外话，这个问题不知道该吐槽vue的官网文档更新不及时，还是该吐槽sass的作者更新版本的时候没有兼容一下老版本呢