全局SASS/SCSS变量在Vue项目中应用解决方案

场景说明

// 这是一个存放变量的scss文件 "@/styles/_variables.scss"
// color font ...
$cf-light: #B6B6B6;
$cf-gray: #8C8C8C;
$cf-med: #505050;
$cf-dark: #333333;
$cf-highlight: #1775F0;

我要在其余文件内都用这个来保证样式统一。好比某个组件

<template>
  <div class="notice">注意！</div>
</template>

<style lang="scss" scoped>
.notice {
  color: $cf-highlight;
}
</style>

这样就报错了。要改为下面这样

<template>
  <div class="notice">注意！</div>
</template>

<style lang="scss" scoped>
@import "@/styles/_variables.scss";
.notice {
  color: $cf-highlight;
}
</style>

简单描述一下：作Vue项目的时候，有时候咱们预先设置了一个主题样式文件（_variables.scss），存放大量的定义的SASS变量，须要在不一样的组件中使用，默认是没法使用的，除非每一个组件内都引入这个_variables.scss文件，十分麻烦，这里提供几种方案。

解决办法

我有几个解决方案，理论上均可行，你们不妨根据实际应用场景来实践一下。

使用sass-resources-loader

若是项目使用Vue-cli 2/3，或者Vue项目用的Webpack，用这个loader都是能够的。官方对于各类场景已经写的很清楚了，请看sass-resources-loader。具体不说明了。

Vue-cli 3.x 下的最方便的方案

这个我还没实践，不过应该是可行的。。。给小白们本身去试，好用的话记得留言回复下哦~

打开vue.config.js文件，进行以下配置：

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        data: `@import "@/styles/_variables.scss";`
      }
    }
  }
};

具体细节，请阅读：

• Globally Load SASS into your Vue.js Applications
• How to Import a Sass File into Every Vue Component in an App

这两篇原理相同，就是细节上有点不一样，怕有的打不开就放两个给你们研究下。

Nuxt

这里仍是接住一个插件style-resources-module，这个最近才出的，高级不少，在他以前，都是用nuxt-sass-resources-loader，若是你的项目还在用旧的，能够换成新的。nuxt-sass-resources-loader官方也说了不在更新维护，建议使用style-resources-module。

怎么用呢？这里有Example，我也复制一份，醒目。打开nuxt.config.js

export default {
  modules: ['@nuxtjs/style-resources'],
  styleResources: {
    scss: [
      './assets/styles/_variables.scss',
      './assets/styles/_mixins.scss' // use underscore "_" & also file extension ".scss"
      ]
  }
}

本身注意文件路径~

结语

如今不用每一个组件都写导入变量文件了，是否是轻松多了，也不会由于文件名，路径调整，而胆战心惊的文件批量替换。

我为何写这个文章，由于虽然之前研究过，可是时代变化很快，一些更好的方案出现了，可是不少人依旧采用旧的，可能在新的项目上带来一些问题，因此就更新了。

（小字，看不见）：其次，我其实在使用easywebpack的egg+vue脚手架遇到了这个问题，搞了半天没搞好。。。去官方群里问没人鸟我，因而凄惨退群（底层技术渣的待遇）。

参考：

• Load a global settings.scss file in every vue component?