vue-cli 安裝sass 和 font-awesome 筆記

執行的命令都是在當前項目的根目錄下執行

1、vue-cli 安裝sass

    a、npm install style-loader css-loader sass-loader --save-dev   //(--save-dev == -D)

    b、npm install  node-sass --save-dev  //(sass-loader 依賴於node-sass)

    c、npm install extract-text-webpack-plugin  //(這個是webpack抽離css的插件，這個cli自帶了，可以-v檢查下)

    d、在webpack.base.config.js 文件中 

    module:{

        rule:[

            {

              test:/\.scss$/,

              loaders:["style","css","sass"]

            }

        ]

    }

e、使用 在.vue文件<style lang="scss" type="text/css" scoped></style> 內部寫scss  ，scoped 組件class模塊化

2、安裝font-awesome

    a、npm install font-awesome 

    b、main.js 文件中 import 'font-awesome/css/font-awesome.css'

    c、使用 在需要的地方 <span class="fa fa-xxx"></span>

 3、安裝less

　　a、npm install less less-loader -D

　　b、在webpack.base.config文件中

　　　　　module: {

　　　　　　rules: [

　　　　　　　　{

　　　　　　　　　　test: /\.less$/,

　　　　　　　　　　loader: "style-loader!css-loader!less-loader"

　　　　　　　　}

　　　　　　]

　　　　　}

　　c、<style lang="less" type="text/css" scoped></style>