zoukankan      html  css  js  c++  java
  • 在vue中使用sass的配置的方法

    1、创建一个基于 webpack 模板的新项目

    $ vue init webpack myvue
    • 1

    2、在当前目录下,安装依赖

    $ cd myvue
    $ npm install
    • 1
    • 2

    3、安装sass的依赖包

    npm install --save-dev sass-loader
    //sass-loader依赖于node-sass
    npm install --save-dev node-sass
    • 1
    • 2
    • 3

    4、在build文件夹下的webpack.base.conf.js的rules里面添加配置

    {
      test: /.sass$/,
      loaders: ['style', 'css', 'sass']
    }
    • 1
    • 2
    • 3
    • 4

    如下图所示: 
    这里写图片描述

    5、在APP.vue中修改style标签

    <style lang="scss">
    • 1

    6、然后运行项目

    $ npm run dev
    • 1

    7、修改APP.vue的样式,可以看下效果 
    这里写图片描述

    8、运行结果背景变成灰色吗,说明你已成功配置好sass

    这里写图片描述

    注:引入多个

    <style lang="scss" type="text/sass">
    @import "assets/scss/public";
    @import "assets/css/main";
    @import "assets/font/iconfont.css"
    </style>

  • 相关阅读:
    作业5.1 四则运算----封装
    作业四
    作业2 (完)
    作业3
    作业二。。
    数独
    回答自己的提问
    《一个程序猿的生命周期》读后感
    阅读13-17章
    阅读10,11,12章
  • 原文地址:https://www.cnblogs.com/yesu/p/9166074.html
Copyright © 2011-2022 走看看