本文字数: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"

Logo

前往低代码交流专区

更多推荐