vue中如何引用全局的sass公共样式

vue中如何引用全局的sass公共样式

Sass拥有比其他任何CSS扩展语言更多的功能和特性。一次又一次地，行业把Sass作为首选CSS扩展语言。
在vue项目开发中你会发现，通过main.js 全局引入的.scss 在.vue文件中不能使用，那如何去解决这个问题呢？下面有两种解决方法，可根据需求自行调整~

1. 傻瓜式引用

   在每个用到全局变量的组件都引入该全局样式文件
   @import ‘path/fileName.scss’

但是组件或者页面不在统一层目录下，引入的路径可能也会有差异，所以还是看看 sass-resources-loader 的解决方法吧。

2. 安装sass-resources-loader

1) npm i sass-resources-loader -D

2) 修改build/utils.js
scss: generateLoaders('sass').concat(
      {
        loader: 'sass-resources-loader',
        options: {
          resources: path.resolve(__dirname, '../src/assets/your.scss')
        }
      }
    )
 3) 重新启动下项目就ok了。。