Vue 中使用 sass-resources-loader 实现全局引入 scss 变量

导读

最终实现的效果是：在 vue 文件的 style 标签中以及其它 scss 文件中都可以直接使用全局配置的 scss 变量，不需要再导入对应的 scss 文件。

目录结构

src
│  App.vue
│  main.js
│
├─assets
│  └─styles
│          index.scss
│          variables.scss
│          variables2.scss

安装插件

# sass-loader: 将 scss 文件编译为 css 文件
# sass-resources-loader: 全局加载 scss 文件
npm i -D sass sass-loader@10.2.1 sass-resources-loader

配置

// vue.config.js
module.exports = {
// ... other config
  chainWebpack: (config) => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach((item) => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          resources: './src/assets/styles/variables.scss',
        })
        .end()
    })
  },
  // ... other config
}

使用

// variables.scss 文件

//  主题色
$themeColor: #0dbc5c; // 一级主题色
$subThemeColor: #51ec97; // 二级主题色

// 字体
$fontColor: #d15656;

// 长度
$w200: 200px;

<template>
  <!-- App.vue -->
  <div id="app">
    <h2>配置全局 scss 变量</h2>
    <div class="box1">哈哈哈</div>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style lang="scss" scoped>
.box1 {
  // 👇 直接使用 scss 变量
  width: $w200;
  height: $w200;
  padding: 10px;
  border-radius: 10px;
  background-color: $themeColor;
  color: $fontColor;
}
</style>

补充

如果有多个 scss 文件都要进行全局配置，可以将 配置 中的 resources 的值改成数组形式，如下：

// vue.config.js
module.exports = {
// ... other config
  chainWebpack: (config) => {
    const oneOfsMap = config.module.rule('scss').oneOfs.store
    oneOfsMap.forEach((item) => {
      item
        .use('sass-resources-loader')
        .loader('sass-resources-loader')
        .options({
          resources: ['./src/assets/styles/variables.scss', './src/assets/styles/variables2.scss'],
        })
        .end()
    })
  },
  // ... other config
}