vue项目全局引入scss

最近在写一个vue框架的项目，为了方便后期维护，实现对颜色，字体，边框等统一管理

我们需要将对应的样式颜色的属性放在scss中，让后引入调用属性，然后维护时我们只需对

scss中的值进行修改，这样维护会相对方便

在网上找了好久，回答都不是特别的详细，

我是参考d2-admin 实现的，这里记录一下，以备不时之需，

话不多说上代码：

项目src目录：

首先我们要做的是对vue.config.js 进行修改，没有这个文件可以新建一个

（这里只针对vue项目，且是vue-cli搭建的vue项目）

const path = require('path')
function resolve (dir) {
  return path.join(__dirname, dir)
}
module.exports = {
  publicPath: '',
  lintOnSave: true,
// 引入css 这一段代码
  css: {
    loaderOptions: {
      // 设置 scss 公用变量文件
      sass: {
        prependData: '@import \'~@/assets/style/public.scss\';'
      }
    }
  },
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@$', resolve('src'))
      .set('assets', resolve('src/assets'))
      .set('common', resolve('src/common'))
      .set('image', resolve('public/image'))
      .set('views', resolve('src/views'))
  }
}

在App.vue中的style中引入：

<style lang="scss">
@import '~@/assets/style/public-class.scss';

#app {
  margin: 0;
  padding: 0;
}
</style>

然后我们在public.scss中引入设置变量的工具scss文件：

@import '~@/assets/style/utils/color-util.scss';

在public-class.scss 中引入public.scss 这里是为了结构更清晰 public-class.scss 这个文件里只写class

@import 'public';

至此你在assets/style/unit/color.scss 中定义的变量在整个vue项目的vue 页面下style中就可以直接使用了，不用在每一个vue都引入一下样式

个人学习笔记，参考d2admin，记录下以备不时之需，如果你刚好看到，并对你有用，那再好不过