vue项目中使用sass、less

  • Post author:
  • Post category:vue




一、安装

  • 在命令行中进入项目的根目录下执行:npm isntall node-sass sass-loader –save-dev就能给项目安装

    node-sass和sass-loader

  • 但可能会存在版本问题,可以通过固定安装版本来解决: cnpm install node-sass@4.13.0 sass-loader@8.0.0 –save-dev



二、使用

  • 在页面或者组件的style标签上添加lang=”scss”即可使用sass



三、Vue中使用sass 的全局变量和 @mixin

在src目录下创建 styles目录 在里面创建 mixin.scss 文件



定义


1、定义变量: $bg_color:#eeeeee;


2、定义函数 @mixin 函数名 ($参数名: 默认值)

@mixin clearfix {
   &:after {
        content:  "";
        display: table;
        clear: both;
    }
}

@mixin flex ($justify-content: flex-start, $align-items: flex-start, $flex-wrap: nowrap) {
    display: flex;
    justify-content: $justify-content;
    align-items: $align-items;
    flex-wrap: $flex-wrap;
}
  • 上述定义了两个函数, 第一个不需要参数, 第二个可以传入参数



使用

xxx.vue 中使用

使用 @include 进行引用即可

<style scoped lang="scss">
@import "@/styles/mixin.scss"
.box {
	background:$bg_color;
    @include flex(center, center);
 }
 </style>

这样就搞定了



版权声明:本文为weixin_40856652原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。