vue-cli 安装sass 和 font-awesome

Posted rhyheart

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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  --save-dev   //(这个是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   --save

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

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

以上是关于vue-cli 安装sass 和 font-awesome的主要内容,如果未能解决你的问题,请参考以下文章

vue-cli+webpack构建vue项目和使用sass报错填坑

vue-cli 3中dart-sass替换node-sass

vue-cli集合elementUI,sass,echarts,jquery,拖拽排序,国际化等

vue-cli 如何使用scss

vue-cli 如何配置sass

配置 Foundation 6 和 Vue-CLI