vue 使用sass/scss

左手的ㄟ右手 2021-07-24 11:44 637阅读 0赞 
  1. 1、安装
  2.     cnpm  install sass-loader@7.3.1 --save-dev //8.0版本太高会报错(web3.x版本)
  3.     cnpm install node-sass@4.14.1 --sava-dev
  5. 2、在build文件夹下的webpack.base.conf.js的rules里面添加配置
  6.         {
  7.             test: /\.scss$/,
  8.             loaders: ['style', 'css', 'sass']
  9.         }
  10. 3、在style属性上添加
  11.         <style lang='scss'>
  12.         导入其他sass文件
  13.         @import '路径'  //省略文件后缀名
  14.             ...
  15.         </style>
  16. 语法:
  17.      (1)定义变量
  18.         $xx:样式值
  20.     (2)可以嵌套选择器,可以使用~、+等选择器
  22.     (3)使用&代表父选择器的最后一个选择器
  23.         .a .b{
  24.             color:red;
  25.             ${
  26.                 color:blue;
  27.             }
  28.         }
  29.          $就表示.b
  31.      (4)定义函数
  32.          @mixin xx{
  33.                  样式
  34.              }
  35.          带有参数和默认值
  36.          @mixin xxx($x,$xx:red)
  37.              {    
  38.                  样式:$x
  39.                  样式:$xx
  40.              }    
  41.          使用
  42.          .b{
  43.              @include xx;
  44.              @include xxx(red,blue);
  45.          }
  47.      (5)样式继承
  48.          .a{xx}
  49.          .a .c{xx}
  50.          .b{
  51.              @exends .a; //会将包含.a的所有样式给.b,包括.a .c的样式
  52.          }

发表评论

表情：
评论列表 （有 0 条评论，637人围观）

还没有评论，来说两句吧...

相关阅读

    相关 【vue】vue-meta使用方法

    本文介绍Vue3中vue-meta的使用方法 > meta标签用于设置HTML的元数据（描述数据的数据），该数据不会显示在页面中，主要用于浏览器（如和现实内容或重新加载页面）

    梦里梦外;梦里梦外;/ 0 赞/ 102 阅读

    相关 使用vue

    1、全局安装webpack npm install webpack -g 2、全局安装vue脚手架 npm install -g @vue/cli-init 3、安装

    女爷i女爷i/ 0 赞/ 230 阅读

    相关 Vue - Vue使用笔记

    判断DOM是否渲染完成 在生命周期中，mounted周期是dom渲染后执行的。 在组件内部，如果需要等待重新给Model赋值后DOM的渲染结束，可以使用`se

    小灰灰小灰灰/ 0 赞/ 406 阅读

    相关 vue使用iconfont

    一：前言 最近在写导航面板(vue-cli)中需要使用到Icon，于是采取了使用阿里的iconfont写这篇文章来记录一下 二：步骤 2.1 挑选需要的icon

    蔚落蔚落/ 0 赞/ 632 阅读