vue中使用scss

之前項目里我一般是使用less的,朋友問到如何引入scss,於是我就簡單的跑了一下,以下主要供自己學習,如有更好的方法可以一起交流討論一下

第一步,安裝依賴

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

注:使用npm下載的時候會報錯,這里推薦使用淘寶鏡像

第二步,下載全局引入scss的依賴,注:如果是直接寫在.vue頁面中是無需下載此依賴的

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

第三步,配置build/utils.js

　　將:

scss: generateLoaders('sass'),

修改為:

　　在webpack.base.conf.js中的module.rules添加如下配置

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

然后你可以在index.scss中引入其余的scss文件

注意:無需在main.js中引入,直接重啟項目看到如下頁面就表示全局引入成功了,這里要注意一點的是,一定要你想該scss生效的.vue文件下添加

<style lang = "scss"></style>這塊代碼,表示scss的樣式在此vue單頁面有效,否則你是看不到這個效果的