vue-cli3实现自动导入scss变量

描述：我们想把scss的变量写在一个scss文件中，然后自动导入到.vue文件中直接调用。

1.通过使用vue-cli-plugin-style-resources-loader

　　前提：导入sass-loader以及node-sass依赖

npm install -D sass-loader node-sass

　　安装：

vue add style-resources-loader

　2.配置相关文件（vue.config.js）

const path = require('path')
module.exports = {
  pluginOptions: {
    'style-resources-loader': {
      'preProcessor': 'scss',
      'patterns': [
        path.resolve(__dirname, './src/styles/abstracts/*.scss'),//导入的scss文件的路径
      ]
    }
  }
}

　然后便可以实现，其他less等也是同等操作，

最后附上官方文档：https://cli.vuejs.org/zh/guide/css.html

vue-cli3实现自动导入scss变量

推荐阅读