如何配置全局sass变量

---

背景

项目中经常会有一些样式会重复使用，比如字体颜色、大小等，为了实现复用的效果，可以引入 sass/less，利用变量、函数等来实现，如果有某些定义的变量和函数希望可以全局使用，而不用每次都引入之后使用，应该怎么做？

sass 和 less 的配置都是一样的，以 sass 为例，假设以下文件包含的变量，函数，混合都需要设置到全局，改如何配置：

src/styles/variables.sass

$font-color: #0A1B2E;
$font-size: 16px;
$primary-color: #009C84;

// 定义一个函数
@function border-color($color) {
  @return unquote("1px solid #{$color}");
}

// 定义一个混合
@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  border-radius: $radius;
}

---

一、使用 sass-loader

webpack.config.js 配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: `@import "@/styles/variables.scss";`
            }
          }
        ]
      }
    ]
  }
}

vue.config.js 配置

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "@/styles/variables.scss";`
      }
    }
  },
}

loaderOptions 对象用于配置 CSS 预处理器的选项，而 sass 对象则是配置 SASS 预处理器的选项，additionalData 选项在 sass 预处理时每个 SASS 文件的顶部插入配置共享到全局的 SASS 代码，这些代码可以包含变量、混合、函数等，然后这些代码就可以在所有的 SASS 文件中使用，而不需要在每个文件中都重复定义。

二、使用 vue-cli-plugin-style-resources-loader 插件

1. 安装插件

npm install @vue/cli-plugin-style-resources-loader -D

2. 配置 vue.config.js

module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      preProcessor: 'scss',
      patterns: [
        path.resolve(__dirname, './src/styles/variables.scss'),
      ]
    }
  }
}

使用此插件的效果和原理和 sass-loader 是一样的

---

扩展

sass-loader 是一个用于 Webpack 的加载器，用于处理 SASS 和 SCSS 文件。它提供了以下常用功能，包括：

1. 导入 CSS 文件：你可以使用 @import 指令来导入其他的 CSS 文件。这对于将 CSS 文件作为模块导入到 SASS 或 SCSS 文件中非常有用。

2. 嵌套规则：你可以使用嵌套规则来简化 CSS 的书写。例如，你可以使用 & 符号来引用父选择器。

3. 变量：你可以使用变量来存储和重用值。这对于存储颜色、字体、间距等常用的值非常有用。

4. 混合：你可以使用混合来重用 CSS 规则。这对于创建可重用的样式模板非常有用。

5. 继承：你可以使用继承来创建 CSS 类之间的关系。这对于创建类似于面向对象编程中的类之间的关系非常有用。

6. 函数和指令：你可以使用函数和指令来创建复杂的样式逻辑。例如，你可以使用 @if、@for、@each 等指令来创建条件样式和循环样式。

7. 模块化：你可以使用 SASS 或 SCSS 文件来创建模块化的样式。这对于组织和管理大型的样式库非常有用。

8. 源映射：sass-loader 支持生成源映射，这对于在浏览器中调试 SASS 或 SCSS 代码非常有用。