vue项目中使用sass、less

一、安装

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

  node-sass和sass-loader

• 但可能会存在版本问题，可以通过固定安装版本来解决： cnpm install [email protected] [email protected] --save-dev

二、使用

• 在页面或者组件的style标签上添加即可使用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>
           

这样就搞定了