记一次sass 全局配置全局变量的使用以及注意点

最新推荐文章于 2025-09-11 17:47:41 发布

原创最新推荐文章于 2025-09-11 17:47:41 发布 · 2.9k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#vue

配置项专栏收录该内容

1 篇文章

订阅专栏

本文介绍了在Vue项目中如何配置和使用Sass全局变量，包括在src/assets/styles创建.scss文件定义变量，以及在vue.config.js中进行配置。同时，文章提到了两个常见错误：一是由于sass-loader版本不同导致的Invalid options object错误，提醒读者关注不同版本的参数设置变化；二是Sass编译时遇到的media query表达式必须以'('开头的错误。

开始使用

1 首先先装sass预编译器

2 在vue项目src目录里的assets文件夹新建一个文件夹(styles)你需要用到的全局的变量,后缀是**.scss**

3 在xxx.scss 文件中定义全局变量

$mainColor: #f6ac19; //主色
$color-text-main: #373B49;
$size48: 48px; // 一级页面特定文字

$setFont: var(--setFont) // 改变文字大小,特殊处理的

4 配置vue.config.js 文件在跟目录新建文件 vue.config.js

const config = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/assets/styles/utils/_fontSize.scss";`
        // 注意键名 (data) 7.x
      }
    }
  }
}
module.exports = config

注意点壹
出现sass-loader报错

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 ‘data’. These properties are valid:
object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? }

出现以上报错,原因是:
scss的版本跟新了,参数设置也有变化了

sass-loader 版本 7.x 的

const config = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "~@/assets/styles/utils/_fontSize.scss";`
        // 注意键名 (data) 7.x
      }
    }
  }
}
module.exports = config

sass-loader 版本 8.x 的

const config = {
  css: {
    extract: {
      ignoreOrder: true
    },
    loaderOptions: {
      sass: {
        prependData: `@import "~@/assets/styles/utils/_fontSize.scss";`
        // 注意键名 (prependData) 8.x
      }
    }
  }
}

module.exports = config

sass-loader 版本 9.x 的

const config = {
  css: {
    extract: {
      ignoreOrder: true
    },
    loaderOptions: {
      sass: {
        additionalData: `@import "~@/assets/styles/utils/_fontSize.scss";`
        // 注意键名 (additionalData) 9.x
      }
    }
  }
}
module.exports = config

注意点贰：

   additionalData: `@import "~@/assets/styles/utils/_fontSize.scss";`
        // 注意键名 (additionalData) 9.x
        // 引号里结尾出的的 ; 一定一定不要忘记,不然会报错
      }