vue-cli3项目配置less全局变量

墨衍会员 · AI 创作全网分发 墨衍智能分发 本文由作者通过墨衍一键同步至各平台 1分发平台 700+累计阅读 795平均单平台已同步平台优快云微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年，写一次发全网我也要 → 码龄9年

关注

原创最新推荐文章于 2026-05-17 05:53:16 发布 795 阅读 AI 写同款· GEO 优化 ›

vue-cli3创建Vue项目本文讲解了如何使用vue-cli3创建属于自己的Vue项目，如果本文对你有所帮助请三连支持博主，你的支持是我更新的动力。下面案例可供参考。阅读详情

ps：项目已配置less，关于less配置不做多说

1.安装相关所需依赖包

npm install style-resources-loader vue-cli-plugin-style-resources-loader -D

2.添加全局less文件

3.设置vue.config.js

// 在暴露的配置对象添加如下配置

pluginOptions: {
  'style-resources-loader': {
    preProcessor: 'less',
    patterns: [path.resolve(__dirname, "./src/assets/css/common.less")] // 引入全局样式变量
  }
}

4.重启项目

使用如下

收录于

vue

当前文章被收录于：

vue

29 篇文章 0 人学习

订阅专栏查看详情

less

当前文章被收录于：

less

5 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

vue-cli 3.x脚手架配置并使用vux vue-cli更新到3.x，改动很大，做前端的朋友推荐我将vux项目转到vue-cli3上，通过看文档和查资料，花了几个小时，终于完成，特此记录。一、安装vue-cli 3 首先官方文档：https://cli.vuejs.org/ 官方文档包含了很多的内容，很靠谱，比较全面，第一步当然是把官方文档看一遍。安装 Node 版本要求 Vue CLI 需要 Node.js 8.9 或更... 阅读详情

相关推荐

Vue 3中引入SCSS和LESS依赖的教程指南

在Vue 3项目中引入SCSS和LESS是一种提高样式管理和可维护性的有效方式。通过安装依赖、配置构建工具和使用样式文件，我们可以轻松地集成SCSS和LESS，并享受它们提供的变量、嵌套和导入功能。参考推荐的教程、文档和GitHub项目，可以更深入地学习和掌握SCSS和LESS在Vue 3中的应用。避免常见的错误配置和路径问题，确保顺利使用SCSS和LESS来优化您的Vue 3项目的样式。希望本文对您理解和使用Vue 3中引入SCSS和LESS的过程有所帮助！

1万+

（配置）vue3中使用less文件全局变量

vue3中使用less文件全局变量

次顶级的博客 1229

【电路设计】带阻滤波器实战：从理论到Twin-T陷波电路实现

本文详细介绍了带阻滤波器的原理与Twin-T陷波电路的实战应用，从基础概念到工程实现全面解析。通过具体案例展示如何设计高Q值滤波器，解决电源噪声等实际问题，并分享PCB布局和元件选型的实用技巧，助力工程师提升电路设计能力。

gg901的博客 1011

vuecli3 配置全局less文件

第一种配置方式 npm install style-resources-loader vue-cli-plugin-style-resources-loader less-loader less -S // vue.config.js文件中的配置 const path = require('path'); module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less', .

liusixsixsix的博客 959

playwright-mcp 安装使用的详细教程

Playwright MCP 快速入门指南 Playwright MCP Server 是由微软开发的浏览器自动化服务，通过 MCP 协议为 AI/Agent/LLM 提供网页交互能力。它基于可访问性树而非屏幕截图，支持多种浏览器和运行模式。安装要求： Node.js v18+ 命令行操作能力支持 MCP 的客户端安装方式：通过 npx 快速启动：npx @playwright/mcp@latest 项目依赖安装：npm install @playwright/mcp 主要特性：支持 Chrome

上善若水 7992

【2021末九软工边缘人保研】川大-中科院网络中心-华师夏令营+哈工大本-中科院网络中心-西交-厦大-中山-武大-北航预推免

2021末九软工边缘人保研记录一、写在前面二、个人背景一、写在前面 2020年计算机保研可谓是诸神黄昏，卷的头破血流（指我等菜鸡）。疫情的原因，今年的夏令营和预推免基本全部改为线上，机试取消，能不能拿到offer基本完全取决于背景以及面试表现（当然也有个别头铁非要机试，甚至笔试的学校）。大佬们offer收割不停，我等边缘人只能看着一封封拒信发呆。这种情况下，只有985 Rank5%以及211 Rank2%之前的大佬能够较为轻松地拿到面试入场券。贴一个上交电院夏令营要求你们感受一下：预推免相比起夏令营

weixin_43222706的博客 4235

Vue-cli3/vitejs/webpack使用style-resources-loader全局引入less/sass/scss全局变量

结合网上诸多无效方法，整理如下注意是vue安装，不是npm！！！ vue add style-resources-loader 安装过程中选择less 修改根目录 vue.config.js 的patterns参数 const path = require("path"); module.exports = { pluginOptions: { "style-resources-...

彭世瑜的博客 1930

PSCAD学习笔记（1）Project Settings（重点snapshot设置）

若不勾选，则横坐标为实际时间2-7s，故障显示在第3s发生。图片中时间坐标轴显示为0-5s，故障时刻显示为第1s，即0-1s展示系统稳态，1-5s展示系统发生故障后的暂态响应，如何通过快照文件实现？勾选该项后，使用快照文件启动仿真会将仿真起始时间强制设置为0s，反之不勾选则依据快照文件保存的时间轴继续（即坐标为实际时间）。如果已有的快照文件保存的是0s至5s的仿真内容，则仿真运行时间从5s开始，到10s结束。如果已有的快照文件保存的是0s至2s的仿真内容，则仿真运行时间从2s开始，到7s结束；

gwenh的博客 7343

less的基本使用

定义同一变量名称（名字）两次或多次后，less只会选择最后定义的！@bg-img : "路径1";@bg-img : "路径2";@bg-img : "路径3";header {} // 结果为：background : url("路径3");

Litt_White的博客 8834

Unity Shader变体优化实战：从内存削减到打包加速

本文深入探讨了Unity项目中Shader变体数量爆炸导致的打包缓慢、内存占用过高及包体臃肿等问题。核心解决方案是通过精准的Shader变体裁剪，即收集项目实际用到的变体形成“白名单”，并利用IPreprocessShaders接口在打包时剔除无用变体。实战表明，该方法能显著提升打包速度并大幅降低运行时内存。

weixin_29300241的博客 217

Qt图表库三选一：Qwt、QChart、QCustomPlot实战性能对比与避坑指南

本文深入对比了Qt开发中三大主流图表库Qwt、QChart和QCustomPlot的性能与适用场景。通过实测数据展示各库在渲染效率、内存占用和功能特性上的差异，并提供针对不同项目需求的选型建议和集成避坑指南，帮助开发者高效选择最适合的Qt图表解决方案。

weixin_33691700的博客 449

Less 中变量的使用（详解）

小张同学的博客 1万+

华为OD机试双机位C卷:挑选宝石 (C/C++/Python/JAVA/JS/GO)

华为OD机试双机位C卷挑选宝石，提供C语言、Java、C++、Python、Go、JavaScript源码实现，并提供完整思路讲解。华为OD机试-挑选宝石，华为OD机考-挑选宝石。

qq_45776114的博客 1500

3项目里面全局用less变量 cli vue_在vue-cli3.0 中使用预处理器 (Sass/Less/Stylus) 配置全局变量操作...

你可以在创建项目的时候选择预处理器 (Sass/Less/Stylus)。如果当时没有选好，内置的 webpack 仍然会被预配置为可以完成所有的处理。你也可以手动安装相应的 webpack loader：# Sassnpm install -D sass-loader node-sass# Lessnpm install -D less-loader less# Stylusnpm instal...

weixin_39758032的博客 245

python ERA-5气象数据NetCDF格式解析(一)

python ERA-5气象数据NetCDF格式解析

weixin_43896283的博客 2638

ssm框架搭建

这个是一个在idea上成功跑起来的ssm框架项目，保存在这里方便以后使用直接下载

3项目里面全局用less变量 cli vue_vue-cli3配置使用vw实现移动端适配案例

前言：本demo是基于脚手架3创建的vue项目，主要演示的是如何使用vw实现移动端适配；并且在项目中如何引入自定义的less全局变量。一. 配置vw适配：1. 安装以下插件：npm install cssnano postcss-aspect-ratio-minipostcss-px-to-viewport postcss-viewport-units postcss-write-svg post...

weixin_33603813的博客 240

蓝牙模块HM-10手册

蓝牙模块HM-10手册，该手册对蓝牙模块HM-10进行了详细的介绍和使用方法以及一些AT指令。

vue3引入全局less Variables和Mixins

一、首先在src/less文件夹下新建variables.less和mixins.less两个文件 1、variables.less文件 @primary: red; @bg: blue; .tt-test { color: @primary; background-color: @bg; } 2、mixins.less文件 /** * @description: 文本溢出（多行） * @param {number} lineNumber 文本溢出的行数 */ .more(@lin

believet93的博客 2262

Data-Structures-and-Algorithm-Analysis-in-Java.pdf

作者: Weiss, Mark A. 出版社: Addison Wesley Data Structures and Algorithm Analysis in Java is an “advanced algorithms” book that fits between traditional CS2 and Algorithms Analysis courses. In the old ACM Curriculum Guidelines, this course was known as CS7. This text is for readers who want to learn good programming and algorithm analysis skills simultaneously so that they can develop such programs with the maximum amo...

SIMATIC S7-1200, S7-1500 PID 控制[手册]

vue-cli4使用全局less文件中的变量该如何配置

目录结构如下：需求：在Navgation.vue中使用global.less中的变量 vue-cli3的配置方法如下：传送门 vue-cli4的配置方法如下：安装 style-resources-loader npm i style-resources-loader -D 在 vue.config.js 中加上如下配置，没有则创建该文件，文件名不能改，如下： // vue...

朽木自雕的博客 6013

vue cli3 全局使用less变量报错“Variable xxx is undefined”

参考：https://blog.youkuaiyun.com/weixin_42289080/article/details/115303674?spm=1001.2101.3001.6661.1&utm_medium=distribute.pc_relevant_t0.none-task-blog-2%7Edefault%7ECTRLIST%7ERate-1.pc_relevant_default&depth_1-utm_source=distribute.pc_relevant_t0.none-t.

轻风细雨_林木木 4399

vue3+ts+ant 定制主题不生效

vue-cli3 默认加载到less less-loader 版本修改为 "less": "^3.13.1", "less-loader": "^6.0.0", // vue.config.js css: { loaderOptions: { less: { lessOptions: { // 修改变量 modifyVars: { "@primary-color": "#563391" }, javascriptEnabled: true, // 全局变量 globalVa

github_37793365的博客 827

vue3.0在mian.js中引入全局less

vue3.0在mian.js中引入全局less 首先安装两个插件 npm i style-resources-loader npm i vue-cli-plugin-style-resources-loader 然后在vue.config.js中配置如下,主要是引入path和 pluginOptions这一部分 const path = require('path') module.exports = { pluginOptions: { 'style-resources-loader': {

weixin_45781661的博客 862

vue less & sass

1: npm install less@3.9.0 less-loader@4.1.0 --save-dev //版本太高可能导致无法使用，测试可用版本有"less": "^3.8.1", "less-loader": "^5.0.0", 2:npm i style-resources-loader --save-dev 3.在vue.config.js中配置，const path = require('path') function resolve (dir) { return ......

gengyan_99的专栏 324

10分钟上手最新vue脚手架

vue-cli 3.0 入门介绍环境安装全新版本的脚手架、逼格非常高、记住这个名字 @vue/cli ，对就是这个你npm 或者yarn 安装就行了，先保证全局环境有它。 npm install -g @vue/cli yarn add global @vue/cli 创建项目这里对比下以前2.X之前的版本 ...

weixin_34096182的博客 184

Vue CLI3 Less 配置

1. Vue CLI3 引入全局 less 文件目的：全局使用 less 文件中定义的变量，而不需要每个组件中单独引入安装 style-resources-loader vue add style-resources-loader 安装过程中选择 Less 回车安装成功之后，在 vue.config.js 文件中生成以下代码 pluginOptions: { 'style...

IDM1001的博客 1439

VUE CLI3 less 全局变量引用

首先展示两个在网上广为流传的方法，我用了没有效果。。。当然估计很多人还是可以成功了方法一 1、添加依赖 style-resources-loader 2、vue.config.js中添加 module.exports = { pluginOptions: { 'style-resources-loader': { preProcessor: 'less', ...

songshuguowang的专栏 7078

vue vue-cli3中使用全局less文件

全局less文件直接在main.js里面导入是没有效果的，刚开始在网上找了很多方法都是在 build / utils 文件里面改，但是vue-cli 3.x构建的项目里没有这个文件夹。。但其实在官网里也有解决方法的 vue-cli3.x 导入全局.less文件进入项目，安装 style-resources-loader npm i style-resources-loader -S 在...