vue-cli 2.x中全局引用公共scss

1.安装scss

这些插件使我们使用scss所必须安装的

	npm install node-sass --save-dev
    npm install sass-loader --save-dev
    npm install style-loader --save-dev   

在webpack.base.conf.js中加上

 {
        test: /\.scss$ /,
        loaders: ['style', 'css', 'sass']
  },

2.创建公共scss

base.scss

写一些我们需要全局设置的一些基本样式，例如清除浮动

mixin.scss

这个文件就是我们scss的mixin文件了

index.scss

是我们scss的总体引入文件，将我们所有的公共scss引入，这样一来我们只要全局引用index.scss文件就可以了

 //minxin
@import './mixin.scss';
 //全局设置的基本样式
@import './base.scss';

3.安装sass-resources-loader来全局引入

这个插件是我们想要全局引用scss所要安装的

 npm install sass-resources-loader --save-dev

修改build中的utils.js

我们将

 scss: generateLoaders('sass'),

改为：

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
	    //你自己的scss全局文件的路径
      resources: path.resolve(__dirname, '../src/common/style/index.scss')
    }
  }
),

这样引入的index.scss是全局都能够直接使用的，每一个vue组件都可以直接使用mixin

4. 更直接的引入方法

我们更改全局的scss， index.scss改为：

 //全局设置的基本样式
@import './base.scss';

我们也可以不用安装sass-resources-loader，而是在mian.js中直接映入scss

import './common/style/index.scss'

这样base.scss就会直接应用，到是如果我们想在vue组件中使用mixin，需要引入再使用

<style lang="scss" scoped>
	@import "@/common/style/mixin.scss";
</style>

注意这样的方式下，直接在 index.scss中引用@import ‘./mixin.scss’;而不在组件中引入mixin,是不行的