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模块化

注：好久没装scss，今天重新安装scss编译一直报错，报错主要是由node-sass插件和sass-loader插件的版本问题引起的，目前将node-sass版本调至4.12.0，sass-loader版本调至7.3.1，编译正常。

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>