关于webpack打包时less-loder安装报错处理

最新推荐文章于 2023-03-01 10:31:06 发布
最新推荐文章于 2023-03-01 10:31:06 发布
阅读量777 收藏
点赞数 1
分类专栏： webpack vue 文章标签： vue npm webpack less sass
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43865875/article/details/107817173
版权

关于webpack打包时less-loder安装报错

loadercontext.getresolve is not a function

需要换低版本的less-loader
在package.json的“devDependencies“查看对应的版本

如下的命令修改less和less-loader的版本

npm install --save-dev less-loader@4.1.0  less@3.9.0

改成 "less": "^3.9", "less-loader": "^5.0.0" 然后重新npm install 再npm run build就好了
以上版本自行修改

Yeira
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 安装 less-loader 报错 unable to resolve dependency tree
2401_84435739的博客
04-29 410
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
webpack3里使用uglifyjs压缩js时打包报错的解决
12-12
环境：webpac<4的场景下，安装uglifyjs。 cnpm install uglifyjs-webpack-plugin -D 安装完毕后，去npm里查看uglifyjs...执行打包命令后报错，重新浏览文档后发现该写法只适用于webpack4，而我的环境是webpack3.x，
webpack 打包css和less资源时报错
weixin_38091374的博客
03-25 664
webpack 打包css和less资源时报错 Module build failed (from ./node_modules/less-loader/dist/cjs.js): solution： module:{ rules:[ { test:/\.css$/, use...
解决webpack安装了less-loader，运行报错
qq_44294202的博客
08-11 478
用webpack打包项目，安装了less-loader模块后报错 原因：less-loader安装的版本过高 解决方案： 1、卸载之前的less npm uninstall less-loader 2、重新安装低版本的 npm install less-loader@6.0.0
安装less-loader5出现webpack版本不兼容
福仔的博客
02-14 2156
但是安装cnpm install --save less-loader的时候报错了，错误比较明确说了less-loader需要依赖老版本版（2.0、3.0、4.0）的webpack，但是安装的webpack（5.0）偏新。现在我们需求明确要用Webpack 3，那只能让sass-loader降级了，问题是降到哪个版本呢？每个包的依赖关系都是放在package.json里面的，一个个版本去看当然很麻烦，这里介绍一个小技巧。虽然NPM已经很自动化了，但依赖问题真的是一个难题，无法自动解决，需要人工干预调整。
webpack打包less出错
x93008的博客
06-01 2885
webpack打包less文件的时候出现了以下错误 ： ERROR in ./node_modules/_antd@4.3.0@antd/lib/button/style/index.less (./node_modules/_css-loader@3.5.3@css-loader/dist/cjs.js!./node_modu les/_less-loader@6.1.0@less-loader/dist/cjs.js!./node_modules/_antd@4.3.0@antd/lib/button/
关于打包处理less文件时遇见的问题：
qq_45770253的博客
06-13 656
关于打包处理less文件时遇见的问题： 原因： less-loader安装的版本过高 解决方案： // 第一步 npm uninstall less-loader // 第二步 npm install less-loader@6.0.0
详解webpack的clean-webpack-plugin插件报错
01-18
const CleanWebpackPlugin = require('clean-webpack-plugin') // const { CleanWebpackPlugin } = require('clean-webpack-plugin') module.exports = { entry: './input.js', output: { path: path.resolve(__...
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
10-14
在Vue项目中，当使用`uglifyjs-webpack-plugin`进行代码压缩和优化时，可能会遇到打包失败的错误，如"Unexpected token: keyword (const)"。这个错误通常表明代码中存在ES6语法，例如`const`关键字，而`uglifyjs-...
Webpack打包字体font-awesome的方法示例
01-19
使用webpack构建font-awesome或者bootstrap的时候，最常见的一个问题就是构建字体文件的问题。经常会出现无法找到字体文件的问题。...3. 设置webpack.config.js处理字体文件 这里有两种方式，如果你不想单独生成字
webpack-subresource-integrity：用于启用Subresource完整性的Webpack插件
02-06
webpack-subresource-integrity Webpack插件，用于启用子资源完整性。 （SRI）是一项安全功能，使浏览器可以验证是否已交付获取的文件（例如，从CDN获取的文件）而没有意外的操作。 产品特点 与可选集成。 自动...
webpack初体验之less，less-loader报错
weixin_43489472的博客
04-25 1953
使用webpack打包less文件时出现以下问题，主要是原因是因为less-loader和webpack版本不兼容，我使用的是webpack@3.6.0，最新版本的less-loader@6.0.0只支持webpack@4.0以上。 ERROR in ./node_modules/css-loader/dist/cjs.js!./node_modules/less-loader/dist/cjs....
关于webpack与less-loader的版本匹配问题TypeError: this.getResolve is not a function at Object.loader
weixin_46314076的博客
05-18 1679
关于webpack与less-loader的版本匹配问题TypeError: this.getResolve is not a function at Object.loader 解决办法： 1.卸载当前的less-loader: npm uninstall --save-dev less-loader （不需要管less） 2.安装你所需要的less-loader版本: npm install --save-dev less-loader@(版本号) ...
webpack和less-loader版本冲突问题报错Rule can only have one resource source
weixin_48210599的博客
07-31 2370
开始启动项目提示了没有less-loader的报错 然后:npm install less-loader 启动项目报错： 然后上网查了下是webpack的版本问题，参考链接 然乎执行卸载wenpack：npm uninstall webpack 接着安装指定版本的webpack：npm install webpack@4.0.0 --save-dev 然后安装没成功就是第二个报错： 感觉这个像是因为安装的webpack版本和less-loader的版本冲突了 所以又执行了卸载less-loader： n
webpack使用less-loader出错处理
qq_41699954的博客
07-16 1622
webpack使用less-loader出错处理 错误 在使用webpack打包less文件时，出现以下错误：Module build failed: TypeError: loaderContext.getResolve is not a function 原因：less-loader版本过高（在package.json查看） 解决方案 （1）卸载高版本less-loader npm uninstall less-loader （2）指定安装版本 npm install less-loa
Vue报错“Failed to resolve loader: less-loader”
mhc20201554114的博客
10-30 8368
前几天在运行项目的时候，突然间报了这样一个错，虽然当时的我感觉很疑惑，明明上次跑的好好 的，这次为啥报我没有安装less-loader依赖，但是我还是老老实实地敲下了安装less-loader的代码，没想到折磨才刚刚开始。一开始我是万万没有想到哇，我仅仅是敲了一句普普通通的、没啥毛病的npm install less-loader,就给我报了这么长一串错，直接给我整懵了，只能去问问度娘了。
less使用教程
weixin_45606890的博客
03-01 302
less使用教程
安装5.0.0版本less-loader命令
qq_39072819的博客
03-06 1445
安装5.0.0版本less-loader cnpm install -save less less-loader@5
项目中安装 less 和 less-loader 命令
热门推荐
Kuroko's Development Notes
01-03 6万+
npm命令如下： npm install less less-loader --save-dev 或者 yarn命令如下： yarn add less less-loader --dev 建议安装在本地依赖，没必要装全局环境，安装成功后 package.json 如下：   要安装全局的话，直接参考less官网：  ...
vue安装less和less-loder
最新发布
06-28
### 回答1： 要在 Vue 项目中使用 Less，需要安装 less 和 less-loader。 1. 安装 less：在项目目录中执行 `npm install less` 或 `yarn add less`。 2. 安装 less-loader：在项目目录中执行 `npm install less-loader` 或 `yarn add less-loader`。 3. 修改 webpack 配置：在 vue.config.js 或 webpack.config.js 中的 module.rules 数组中添加一项配置，使 less-loader 能够识别 .less 文件。 例如： ``` module.exports = { module: { rules: [ { test: /\.less$/, use: [ 'vue-style-loader', 'css-loader', 'less-loader' ] } ] } } ``` 之后你就可以在vue文件里直接使用less了 ### 回答2： less是一种动态样式语言，可以减少CSS代码的复杂性，同时也可以增加代码的可读性和可维护性。而Vue.js是一种渐进式JavaScript框架，在前端开发中非常流行。如果你使用Vue进行项目开发并希望使用less，我们需要安装less和less-loader模块。 less是一种CSS预处理语言，提供了比原生CSS更多的功能。less可以让用户使用变量、嵌套和函数等功能，来增加CSS样式表的灵活性与可读性。less-loader则是一个Webpack的loader，可以将less文件转换成CSS文件。使用Vue.js时，需要进行以下步骤来安装和使用less和less-loader： 1. 安装less和less-loader模块： 可以使用npm命令在命令行中安装less和less-loader： npm install less less-loader --save-dev 2. 在Vue项目中，配置webpack.config.js： 在webpack.config.js中的module.exports中添加一个rules属性，如果没有则需要创建一个。对于样式文件，添加如下代码： { test: /\.less$/, loader: "style-loader!css-loader!less-loader" } 这个代码告诉Webpack如何处理.less文件。分别使用style-loader、css-loader和less-loader解析less文件，再将处理后的样式文件添加到页面中。 3. 在Vue单文件组件中使用less： 在需要使用less的单文件组件中，可以使用<style>标签来引入less文件。示例代码： <style lang="less"> /*less样式代码*/ </style> 通过以上步骤，就可以在Vue项目中使用less和less-loader了。在Vue单文件组件中，只需要使用<style>标签来引入less文件，然后Webpack就会自动将其转换成CSS文件，然后加入页面中。同时，由于less可以使用变量、嵌套和函数等功能，能够帮助我们更好地管理和维护CSS代码。 ### 回答3： Vue.js 是一个开放源代码渐进式 JavaScript 框架，可用于构建用户界面，不仅易于学习，而且在 Web 开发中得到了广泛的应用。在 Vue.js 的开发过程中，可以通过使用 Less 来简化 CSS 的编写，并可以通过使用 Less Loader 将 Less 文件转换为 CSS 文件。 在 Vue.js 中安装 Less 和 Less Loader，首先需要执行 npm 命令来安装，命令如下： ``` npm install less less-loader --save-dev ``` 其中，less 和 less-loader 分别为 Less 和 Less Loader 的依赖包，--save-dev 参数表示安装到开发环境中，而不是作为生产环境的依赖包。 安装完成后，在 Vue 项目的配置文件中进行配置，找到 build > module > rules 节点，在 rules 中配置 Less Loader，示例代码如下： ``` { test: /\.less$/, loader: 'less-loader', options: { strictMath: true, noIeCompat: true } } ``` 其中 test 表示要匹配的文件类型，这里使用正则表达式 /\.less$/，表示匹配所有以 .less 结尾的文件。在 loader 中指定 less-loader，options 中设置 Less Loader 的选项，如 strictMath 表示启用严格的数学模式，noIeCompat 表示禁用 IE 兼容性。 最后，在.vue 组件中引入 Less 文件，通过使用 style 标签和 lang 属性将 Less 文件转换为 CSS 文件，示例代码如下： ``` <style lang="less"> @color: #f44336; p { color: @color; } </style> ``` 其中 lang 属性指定语言类型为 less，使用 @ 符号定义变量 @color，并在 p 标签中使用变量设置颜色值。 以上就是在 Vue.js 中安装 Less 和 Less Loader 的方法，安装并配置好之后，就可以愉快地在 Vue 项目中使用 Less 来进行 CSS 样式设计了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值