vuecli4配置sass与less

Posted 2023-04-08

参考技术A 在VUE项目中，选择UI框架的时候。我一般都是element-ui选择sass，ant design of vue我选择是less。下面我们来看下如何配置，我这里使用的是vue-cli@4.5，vue@2.6。我使用的是淘宝镜像安装

相对于less而言，配置sass要简单的多了。
1、安装 node-sass 、 sass-loader

2、再 vue.config.js 中配置

1、安装 less or node-less 、less-loader 、 style-resources-loader 、 vue-cli-plugin-style-resources-loader

2、配置 vue.config.js

3、less虽然再 vue.config.js 中被引用了，还需要再 main.js 中引用才可以使用

less与sass对比

导入：都用@import“文件名”的方式
                                                      less                             sass
变量声明：   　　　　                      @属性:值;                        $属性:值;
使用：    　　　　　                     　属性：@属性                     属性：$属性
    

混合声明：    .　　                     名称{属性:值}                    @mixin 名称{属性:值;}
使用：    　　　                         　.名称                           　　 @mixin 名称

    

带参数的混合声明：        .名称 (@变量) {属性: @变量;}      @mixin 名称($变量){属性: $变量;}

使用：                                        .名称(值);                        @include 名称(值)

    

多参数混合声明：.名称(@变量,@变量,@变量,@变量)        @mixin 名称($变量,$变量)
                         {属性: @arguments;}                { 属性:$变量;属性:$变量；}

使用：                                   .名称(值,值,值,值);                 @include 名称(值,值);