vue -- 使用sass并引入公共sass文件

sass可以提高我们的开发效率，怎么在vue的项目中使用sass并且可以设置一些公共的文件呢？

使用sass

1、安装sass的依赖包

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

2、在build文件夹下的webpack.base.conf.js的rules里面添加配置

module: {
    rules: [
      //...默认及其他
      {
        test: /\.scss$/,
        loaders: ["style", "css", "sass"]
      }
    ]
}

3、在.vue文件中修改style标签

<style lang="scss">

4、配置公共sass文件

1、下载依赖

cnpm install  --save-dev  sass-resources-loader 

2、在build/utils.js中修改配置：

scss: generateLoaders('sass').concat(
  {
    loader: 'sass-resources-loader',
    options: {
      resources: path.resolve(__dirname, '../src/assets/scss/common.scss')  //注意自己的路径
    }
  }
)

此时，我们就可以在我们创建的scss文件中肆意妄为的使用sass语法了！