在vue中使用sass的配置的方法

qq_34980024發表於2018-06-10

1、建立一個基於 webpack 模板的新專案

    1.$ vue init webpack myvue

2、在當前目錄下,安裝依賴

         1. $ cd myvue

    2.$ npm install

3、安裝sass的依賴包

        1.npm install --save-dev sass-loader

    2.//sass-loader依賴於node-sass

    3.npm install --save-dev node-sass


4、在build資料夾下的webpack.base.conf.js的rules裡面新增配置

        

         test: /\.sass$/, loaders: ['style', 'css', 'sass']

    }

如下圖所示: 
這裡寫圖片描述

5、在APP.vue中修改style標籤

      1.  <style lang="scss">

6、然後執行專案

       1. $ npm run dev

7、修改APP.vue的樣式,可以看下效果 
這裡寫圖片描述

8、執行結果背景變成灰色嗎,說明你已成功配置好sass

這裡寫圖片描述

相關文章