vue+vue-cli中使用less

最新推荐文章于 2022-01-18 19:39:05 发布

原创最新推荐文章于 2022-01-18 19:39:05 发布 · 328 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #vue-cli #less

vue vuex vue-router 专栏收录该内容

29 篇文章

订阅专栏

本文详细介绍如何在项目中使用Less预处理器，并将其与Webpack构建工具无缝集成。具体步骤包括安装必要的加载器，配置Webpack以识别和处理Less文件，以及在Vue组件中应用Less样式。通过遵循这些步骤，开发者可以轻松地将Less引入到基于Webpack的项目中。

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

步骤一

npm install less less-loader --save

步骤二下面代码加在 webpack.base.conf.js

{
test: /\.less$/,
loader: "style-loader!css-loader!less-loader",
}

步骤三

<style lang="less" scoped>
@base: #f938ab;
.box {
        span {
            float: left;
            color:@base;
            span {
                    boder:1px solid @base;
                }
        }
}
</style>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

八佾舞于庭

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue-cli3里使用less

w18789476022的博客

03-23

604

运行该行命令： vue add style-resources-loader 安装成功在vue.config.js里修改如下代码： pluginOptions: { 'style-resources-loader': { preProcessor: 'less', patterns: [ //这个是加上自己的路径， //注意：试过不能使用别名路径 path.resolve(__dir..

less在vue-cli的使用

weixin_46301474的博客

02-20

271

在vue-cli中构建的项目中使用less可以发现，在package.json并没有less相关的插件，所以需要自行安装。第一步：安装 npm install less less-loader --save-dev 第二步：在配置文件中配置 *新建一个webpack.dev.conf.js文件，在文件写入以下代码并保存。 module: { rules: utils.styleLoaders(...

参与评论您还未登录，请先登录后发表或查看评论

vue-cli 中使用less

weixin_33962923的博客

06-07

138

第一步安装less和less-loader，命令如下 npm install less less-loader --sava-dev 第二步打开build/webpack.base.conf.js，在module.exports 对象中添加依赖 module.exports = { module: { rules: [ ...

vue-cli 构建的项目中使用 Less

my_roads的博客

09-26

3211

安装 less 和 less-loader ，在项目目录下运行如下命令 npm install less less-loader --save-dev 安装成功后，打开 build/webpack.base.conf.js ，在 module.exports = 的对象的 module.rules 后面添加一段： module.exports = {

如何在vue-cli中使用less

tumi

04-08

793

在这之前，你需要确定已经具备环境：node.js；vue.js；vue.cli；webpack；首先安装lessnpm install less less-loader --save-dev其次在build/webpack.base.conf.js中加入一则less的rulemodule.exports = { // 此处省略无数行，已有的的其他的内容 module: { ...

vue-cli中使用less

tuzi007a的博客

01-18

1072

安装less , less-loader（用5.0.0及以下版本，太高了可能不支持） yarn add less yarn add less-loader@5.0.0 进入/src/main.js 引入less： import less from 'less'; 使用less中间件： Vue.use(less); 在.vue文件中使用less语法： <style lang="less" scoped> .a { font-size: 14px; .b { color: pi

vue-cli3:vue-cli3脚手架 vue+typescript+vue-property-decorator+vue-class-component+axios

04-08

要在项目中使用axios，先安装： ```bash npm install --save axios ``` 然后在需要发送HTTP请求的组件或服务文件中导入并使用： ```typescript import axios from 'axios'; export default class MyService { ...

vue2项目+elementui+axios+vueRouter+vuex+less初始化项目

05-23

在Vue2项目中，使用Less可以编写结构清晰、可复用的样式代码。这个项目中的文件结构包含了`.babelrc`用于配置Babel转译规则，确保Vue2项目在旧浏览器中的兼容性；`.editorconfig`定义了代码格式化规范，保持团队间...

vue3-h5-template::party_popper:基于Vue3+TypeScript+ Vue-Cli4.0 + vant ui + sass+ rem 适配方案+axios 封装 + jssdk配置 + vconsole移动端调试，构建手机端模板脚手架

05-09

你可以使用或在同一台电脑中管理多个 Node 版本。本示例 Node.js 12.14.0 项目结构 vue-h5-template -- UI 主目录 ├── public -- 静态资源 ├ ├── favicon.ico -- 图标 ├ └── index.html -- 首页 ...

vue-cli4使用全局less文件中的变量配置操作

01-18

在Navgation.vue中使用global.less中的变量 vue-cli3的配置方法如下：传送门 vue-cli4的配置方法如下：安装 style-resources-loader npm i style-resources-loader -D 在 vue.config.js 中加上如下配置，没有则...

vue-cli初始化项目中使用less的方法

10-18

Vue CLI 是 Vue.js 的官方命令行工具，用于快速搭建现代化的 Vue.js 开发环境。它提供了许多自动化构建任务，如自动...希望本篇文章的内容对你在 Vue 项目中使用 Less 有所帮助，如果有任何疑问，欢迎继续交流探讨。

vue-cli 构建的项目中如何使用 Less

逆行者

07-16

2万+

vue-cli 构建的项目默认是不支持 less 的，需要自己添加。首选，安装 less 和 less-loader ，在项目目录下运行如下命令npm install less less-loader --save-dev当然，比起 npm，我个人更喜欢用 yarnyarn add less less-loader --dev安装成功后，打开 build/webpack.base.conf.js ，

2.20 vue-cli构建项目使用 less

li_yan_的博客

02-20

654

在vue-cli中构建的项目是可以使用less的，但是查看package.json可以发现，并没有less相关的插件，所以我们需要自行安装。第一步安装打开cmd命令行，执行npm install less less-loader --save-dev，通过npm安装less和less-loader，并记录到devDependencies中，出现下图所示即表示安装成功第二步在配置文件...

Vue.cli中使用less

weixin_30426957的博客

04-26

一、什么是less? Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。二、如何安装 vue-cli中已经内置配置好了sass 以及lass的配置。在项目工程目录下安装模块即可~ 　　2.1、安装less以及less-loader依赖　　　　　　npm install less less-loade...

vue-cli 中如何使用less

Sissi的个人笔记

07-17

837

第一步因为vue-cli中是不支持less的，所以要使用的话需要自己安装less和less-loader，命令如下 npm install less less-loader --sava-dev 第二步打开build/webpack.base.conf.js，在module.exports 对象中添加依赖 module.exports = { module: { ...

Vue-cli中安装并使用Less

热门推荐

一个兢兢业业的programmer

12-18

5万+

首先安装vue-cli，网站教程多多，在这不多说。接下来在vue项目目录下，运行其他扩展使用方法我放个官网链接，大家可以点击查看 npm install less less-loader --save-dev 等待安装成功即可，接下里我们可以在vue项目中的package.json中看到less的相关依赖接下来找到bulid目录下的webpack.base.conf.js并打...

vue-cli中使用Less全局变量，一次性导入

weixin_38169359的博客

09-06

162

1、安装sass-resources-loader npm install sass-resources-loader --save-dev 2、添加函数找到 build/utils.js 文件，在 exports.cssLoaders 模块中加多一个函数 function lessResourceLoader() { let loaders = [ ...

vue-cli使用less

aohou7050的博客

07-06

159

vue-cli中使用less package.json 中添加 less,less-loader 之后不需要进行其他配置在vue-cli构建的项目中 utils.js 已经帮我们引入了各种css编辑器在这之后就可以在js中import less了一般在 mian.js 中引入全局使用的css 比如说重置页面样式 ,初始化...

最新发布

06-28

<think>我们正在处理一个构建错误：`TypeError:loaderContext.getOptionsis nota function`，这通常是由于Webpack版本与loader版本不兼容导致的。根据之前的分析，我们建议检查项目中相关依赖的版本，特别是`loader-utils`、`less-loader`、`webpack`和`webpack-cli`。用户要求执行：`npmls loader-utilsless-loaderwebpackwebpack-cli`来查看依赖树，并解决版本冲突。步骤：1.在项目根目录下运行命令：`npm lsloader-utils less-loader webpack webpack-cli`2.分析输出，查看这些包的版本以及它们是否满足兼容性要求（Webpack4需要loader-utils@1.x，less-loader@7.x等）3.如果存在版本冲突，则根据输出调整版本。注意：由于项目使用了`uni-app`，可能由`@dcloudio/vue-cli-plugin-uni`管理webpack配置，因此可能不会直接看到webpack的版本，但可以通过查看`node_modules/webpack/package.json`来确认。如果命令输出显示有版本不兼容（例如，loader-utils版本是2.x而webpack是4.x），则需要手动调整版本。调整方法： -安装兼容版本：例如，如果webpack是4.x，则安装`loader-utils@1.4.0`和`less-loader@7.3.0`-使用`npm installloader-utils@1.4.0less-loader@7.3.0--save-dev`（如果这些包在devDependencies中）另外，注意项目可能使用了`vue-cli`，它内部封装了webpack，因此可能需要检查`@vue/cli-service`的版本，因为不同版本的`@vue/cli-service`使用的webpack版本不同。常见对应关系：- `@vue/cli-service@4.x`对应 webpack4- `@vue/cli-service@5.x`对应 webpack5因此，如果项目使用的是`@vue/cli-service@4`，那么应该使用与webpack4兼容的loader。如果运行`npmls`命令后，发现有不兼容的版本，我们可以通过调整版本来解决。此外，如果项目中有多个版本（由于依赖冲突导致），可能需要使用`npm dedupe`或手动安装指定版本来解决。下面我将模拟运行`npm ls`命令后可能出现的输出，并给出解释和解决方案。</think>### 解决依赖冲突：`npm ls` 分析与版本调整 #### 步骤 1：运行依赖树检查命令 ```bash npm ls loader-utils less-loader webpack webpack-cli --depth=3 ``` 此命令会显示完整的依赖树，帮助定位版本冲突源[^1][^2]。 #### 步骤 2：分析典型输出结果 ```tree my-project@0.1.0 ├─┬ @vue/cli-service@4.5.19 │ ├── webpack@4.46.0 │ ├─┬ css-loader@5.2.7 │ │ └── loader-utils@2.0.3 ❌ 冲突源 ├─┬ less-loader@10.0.1 │ └── loader-utils@2.0.3 ❌ 不兼容 Webpack4 └─┬ webpack-cli@4.10.0 └── @webpack-cli/configtest@1.2.0 ``` **关键问题标记**： - ❌ `loader-utils@2.0.3`：需要 Webpack5，但项目使用 Webpack4 - ⚠️ `less-loader@10+`：仅兼容 Webpack5+ #### 步骤 3：执行版本修正方案 ```bash # 降级到兼容版本 npm install --save-dev \ loader-utils@^1.4.0 \ less-loader@^7.3.0 \ css-loader@^5.2.7 # 清理缓存重建 npm cache clean --force rm -rf node_modules package-lock.json npm install ``` #### 步骤 4：验证修复结果 ```bash npm ls loader-utils webpack ``` 预期输出： ```tree my-project@0.1.0 ├─┬ @vue/cli-service@4.5.19 │ ├── webpack@4.46.0 │ └─┬ css-loader@5.2.7 │ └── loader-utils@1.4.1 ✅ 兼容版本 └─┬ less-loader@7.3.0 └── loader-utils@1.4.1 ✅ 兼容版本 ``` #### 版本兼容对照表 | 依赖包 | Webpack4 兼容版本 | 当前推荐版本 | |---------------|-------------------|--------------| | loader-utils | 1.4.x | 1.4.1 | | less-loader | 7.x | 7.3.0 | | css-loader | 5.x | 5.2.7 | | webpack | 4.x | 4.46.0 | | webpack-cli | 3.x - 4.x | 4.10.0 | > **关键提示**：如果仍存在冲突，使用 `npm dedupe` 可优化依赖树结构[^3]。对于 uni-app 项目，需确保 `@dcloudio/vue-cli-plugin-uni` 版本不低于 `2.0.3-30620210630001`[^1]。