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">

配置公共sass文件

目前沒有靠譜的方案，這里有一個方案（如果.vue的結構相對規律是完全可以使用）

在build文件夾下的utils.js的exports.cssLoaders里面的return中添加配置

//默認
sass: generateLoaders('sass', { indentedSyntax: true }),  
//.vue文件相對於base.scss文件，所以結構相對統一時用處更大嘍~
scss: generateLoaders('sass',{data:'@import "../assets/scss/base";'}), 

官方推薦的方式（親測有效-但需要其他依賴）

vue-loader

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/base.scss')  //注意自己的路徑
    }
  }
),