vue-cli中使用less，局部使用以及全局一次性引用

最新推荐文章于 2025-06-14 15:03:11 发布

原创最新推荐文章于 2025-06-14 15:03:11 发布 · 2.8k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#less

vue 同时被 3 个专栏收录

5 篇文章

订阅专栏

css

4 篇文章

订阅专栏

less

1 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中配置LESS全局变量和函数，包括使用cnpm安装LESS和less-loader，以及如何在单文件组件中引用LESS。此外，还介绍了如何通过style-resources-loader实现全局LESS文件的一次性引入，简化开发流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一步安装

此处我使用的是cnpm安装，并记录到devDependencies中，因为这是我们在开发中使用的而非在生产中使用，所以就不将之记录在 dependencies 中。

cnpm install less less-loader --save-dev

第二步在单文件组件引用

在style标签中加入lang='less’就可以。

<template>
    <div>
        fhkdl
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang='less'>
    @color:rgb(219, 86, 86);
    div{
        color: @color;
    }
</style>

全局使用

此时直接在src下的assets文件夹下建立less文件夹，里面可以放共用的less文件，最后一步就在App.vue中使用@import，注意：style标签需要添加lang='less',否则引入就无效！
在这里插入图片描述

<style lang='less'>
@import '../src/assets/less/global.less';
</style>

但是这种写法，过于麻烦，不符合全局引用的思想。下方介绍的这个方法，比较实用，适合于全局的less文件一次性引入到每个组件当中，不过你仍然需要在App.vue当中引入哦，否则不是变量的的全局设置不会被使用
1、首先需要在根目录下安装Style Resources Loader，

cnpm install style-resources-loader -D

2、在build/utils.js文件下加入这个代码
在这里插入图片描述
记得更改成你的全局路径

if(loader == 'less'){
      loaders.push({
       loader: 'style-resources-loader',
       options: {
        patterns: path.resolve(__dirname, '../src/assets/less/global.less')
       }
      })
    }

这样一来就大功告成了，不需要再单独引入了。直接调用全局的变量和函数都是OK的
global.less文件

@active-color:#036eb8;
@common-color:#fff;
@common-font:14px times,'微软雅黑';

body,a{
    color: @common-color;
    font:@common-font;
}

.common{
    width: 1170px;
    margin: 0 auto;
}

某个子组件当中，他也是不会报错的

<style lang="less">
    @head-height:72px;
    .header{        
        height:@head-height;
        .common();
    }
    .header a{
        color: @active-color;
    }
</style>