如何在vue中使用sass和引入全局sass文件

最近的项目一直在用sass,而vue-cli中默认是不支持sass的,所以我们需要自己配置一下才可以在vue中使用,我们首先需要安装node-sass和sass-loader,然后在webpack配置文件中中添加一个rules

javascript

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

这样就可以在vue中使用sass来写css了.由于有一些公用的函数和变量之类的,所以我们还需要引用一个全局的sass,注意直接用import引入sass文件是没有用的虽然样式起效但是我们无法在所有的组件中使用到全局的变量,所以还需要一些其他的配置
这里我们去修改一下vue中build文件下的utils,增加如下两个函数

javascript

 function resolveResouce (name) {
    return path.resolve(__dirname, '../src/assets/scss/' + name)
  }// 解析一下文件路径 这里的路径可以自己设置
  function generateSassResourceLoader () {
    var loaders = [
      cssLoader,
      // 'postcss-loader',
      'sass-loader',
      {
        loader: 'sass-resources-loader',
        options: {
          // it need a absolute path
          resources: [resolveResouce('global.scss')]
        }
      }
    ]
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

并且将下面返回的对象中的scss部分改成 scss: generateSassResourceLoader()即可