VUE相关 一月 05, 2021

配置vue项目中scss的全局变量

文章字数 4.1k 阅读约需 4 mins. 阅读次数 0

看到了一个教程

我们可以在 vue 项目中配置全局变量以便于引入,而不用在每一个页面 import,是不是很方便!(这里就有疑问了)我们在 main.js 全局引入不就好了吗?答案是:不生效,至于为什么我猜测有关于预处理器的原因。

问题:

我们希望在子页面可以全局的使用 scss 变量

按照教程的做法,修改了 vue.config.js 当中的 css 配置项,然而并不生效,并且报错“Undefined variable”。

分析:

“Undefined variable”
这个报错可以看出 variable.scss 肯定没有引入成功,问题出在 vue.config.js 的配置项上,通过搜索相关资料,发现有不同的版本。我一个个试了一遍然而都没有用。

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        prependData: `@import "@/assets/styles/_variables.scss";`,
      },
    },
  },
};
module.exports = {
  css: {
    loaderOptions: {
      scss: {
        additionalData: `@import "~@/assets/styles/_variables.scss";`,
      },
    },
  },
};

分支问题:

  1. sass-loader 是什么?
  2. 为何配置项 loaderOptions 中有的是 scss,有的是 sass,他们之间有何区别?

解答:

  1. sass-loader 是一种预处理器,可以将 sass 编译为 css 代码。
  2. scss 是 sass 3 引入的新语法,可以理解 scss 基于 sass,所以 sass-loader 可以处理 scss

Google 一下,看到这篇文章

原来不同版本有不同的写法

项目中sass-loader的版本为7.0

解决:

使用命令安装下预处理器

npm uninstall --save sass-loader // 卸载sass-loader
npm uninstall --save node-sass // 卸载node-sass
npm i -D sass-loader@7.x // 安装sass-loader
npm i -D node-sass@4.x // 安装node-sass

安装完成后,项目中版本升级了

对应sass-loader版本7.x,配置项中的参数为 data,修改 vue.config.js 配置项为:

module.exports = {
  css: {
    loaderOptions: {
      scss: {
        data: `@import "@/assets/scss/variables.scss";`,
      },
    },
  },
};

注意:sass-loader的版本11.0.0不兼容vue@2.6.12,版本的选择和依赖必须匹配。

结论:

原来是版本的问题,版本对应使用不同配置项的 key 值

参考链接:


上一篇:
下一篇:
0%