踩坑记：Vue sass-loader V10配置全局变量

本文字数：349 预计阅读时间：1.5分钟

问题：Vue中使用 scss 配置全局变量时报错 ~

版本信息：

Vue 2.6.11 Cli 4.5.00

sass-loader 10.0.2

node-sass 4.14.1

Sass、Less是强化 CSS 的辅助工具，它并不是一门语言，但能有效提高开发效率，最直白的感受是大幅度减少了各种寻找Class，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。

本次记录在Vue中引入sass以及如何解决配置全局变量时报错的问题；

1、安装sass-loader：

npm install -D sass-loader sass

然后你就可以导入相应的文件类型，或在所有的.vue 文件中这样来使用：(注意style标签必须设置lang属性为scss)

<style lang="scss">
    //@import '全局变量scss'
    $color: red;
</style>

2、配置全局变量：

如果在每一个.vue文件都引入import scss文件，还是比较麻烦的，所以直接全局搞定，无需任何地方引入 步骤如下：

安装node-sass：

npm install node-sass --save-dev

配置全局变量scss文件：

//src > styles > variables.scss
    $blue: #324157;
    $red: #c03639;
    $pink: #e65d6e;

项目根目录vue.config.js内配置sass路径：

//project (root) > vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            scss: {
                additionalData: `@import "./src/styles/variables";` //注意
            }
        }
    }
};

PS：

由于sass-loader版本不同，loaderOptions 中 additionalData的键名也不同，基本各大技术论坛90%的scss配置全局变量的文章都未提及V10的键名，这也是导致我踩坑一早上的罪魁祸首...em.....

sass-loader v8-，这个选项名是 "data"
sass-loader v8 中，这个选项名是 "prependData"
sass-loader v10+，这个选项名是 "additionalData"

来源：oschina

链接：https://my.oschina.net/u/4343139/blog/4668005

标签

Vue.js

Sass

javascript