Vue項目引入sass

　　最近兩天手頭的事情暫時搞完了，可以抽出空來學習一下東西，之前項目都是鵬哥搭建好了，我們在直接在里面寫代碼，sass語法用來寫樣式還是比較方便常用的，今天就來試試怎么引入和配置sass

 

參考文章：Vue項目使用sass

（1）首先是先用vue-cli構建一個新的vue項目

　　① 安裝node

　　② node安裝好后安裝腳手架：npm install -g vue-cli

　　③ 構建vue項目：vue init webpack vue_exercise

　　④ 進入項目根目錄，把項目運行起來：npm run dev

 

（2）安裝sass

　　① npm install node-sass --save-dev

　　② npm install sass-loader --save-dev

　　如果網絡不好，會導致安裝失敗，這時需要從淘寶鏡像安裝node-sass,

　　npm install -g cnpm --registry=https://registry.npm.taobao.org  （安裝淘寶鏡像）

　　cnpm install node-sass  --save （使用淘寶鏡像安裝node-sass）

 

（3）配置sass編譯

　　打開根目錄下build/webpack.base.config.js，在modules對象的rules數組中加入一個對象，如下：

　　

module: {
    rules: [
      {
        test: /\.scss$/,
        loader: 'style-loader!css-loader!postcss-loader!sass-loader',
      }
    ]
}

　　

　　看了下大佬的說法，loader: 'style-loader!css-loader!postcss-loader!sass-loader'主要針對vue1.0版本可用，在vue2.0中測試了下也是可以的，在vue 2.0 的sass配置也可以如下這樣：

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

 

　　保存一下，然后去在組件中試了下sass語法已經可以正常編譯了，nice，學了個好玩的東西...