深入解析Vue2 添加對scss的支持

這篇文章主要介紹了詳解Vue2 添加對scss的支持，寫的十分的全面細緻，具有一定的參考價值，對此有需要的朋友可以參考學習下。如有不足之處，歡迎批評指正。

引入loader

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

scss支持

爲了使用scss，我們需要先安裝相關的node包：

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

安裝好之後，爲了可以在.vue和.scss中使用，需要在webpack.config.js中配置對應的解析器：

var webpack = require('webpack');
module.exports = {
  entry: ['./src/entry.js'],
  output: {
    path: __dirname,
    filename: 'build/main.js'
  },
  resolve: {
    alias: {
      'vue': 'vue/dist/vue.js'
    }
  },
  module: {
    loaders: [{
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            scss: 'style-loader!css-loader!sass-loader'
          }//在此我向大家推薦一個前端全棧開發交流圈：619586920  突破技術瓶頸，提升思維能力
        }
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        exclude: /node_modules/
      },{
        test: /\.css$/,
        loader: ['style-loader', 'css-loader']
      }, {
        test: /\.scss$/,
        loader: ['style-loader', 'css-loader', 'sass-loader']
      }, {
        test: /\.(png|jpg|jpeg|gif|bmp)$/,
        loader: ['file-loader?limit=7000&name=build/assets/[name].[ext]']
      }//在此我向大家推薦一個前端全棧開發交流圈：619586920  突破技術瓶頸，提升思維能力
    ]
  }
};

關於上面resolve的配置，是因爲編譯和打包源文件默認不一樣。

測試scss

打開PageTwo.vue測試一下：

<style lang="scss" scoped>
section {
 & > div {
  font-size: 20px;
 }
}
</style>

編譯正常。

結語

感謝您的觀看，如有不足之處，歡迎批評指正。

獲取資料

本次給大家推薦一個免費的學習羣，裏面概括移動應用網站開發，css，html，webpack，vue node angular以及面試資源等。
對web開發技術感興趣的同學，歡迎加入Q羣：619586920，不管你是小白還是大牛我都歡迎，還有大牛整理的一套高效率學習路線和教程與您免費分享，同時每天更新視頻資料。
最後，祝大家早日學有所成，拿到滿意offer，快速升職加薪，走上人生巔峯。