安装webpack及使用less-loader出现的错误

最新推荐文章于 2022-07-27 11:25:13 发布
最新推荐文章于 2022-07-27 11:25:13 发布
阅读量4.2k 收藏 2
点赞数
分类专栏： webpack 文章标签： vue.js node.js npm less webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44035930/article/details/107566402
版权
这篇博客介绍了webpack的全局和局部安装步骤，并详细讨论了在使用less-loader时遇到的'loaderContext.getResolve is not a function'错误，提供了解决方案，包括降级less-loader版本来解决问题。
摘要由CSDN通过智能技术生成

webpack安装
使用less-loader报错…Module build failed: TypeError: loaderContext.getResolve is not a function

webpack是一个前端模块打包工具，与grunt/gulp不同的是grunt/gulp更加强调前端流程自动化，而webpack更加强调模块化开发管理

webpack安装

全局安装

1.安装webpack首先要安装node.js，Node.js 安装包及源码下载地址为：https://nodejs.org/en/download/，历史下载地址：https://nodejs.org/dist/
2.安装完node.js之后，可使用npm安装webpack，由于 npm 安装速度慢，可以使用淘宝的镜像及其命令 cnpm，淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org
使用 cnpm 全局安装webpack：cnpm install webpack -g
也可指定webpack的版本:cnpm install webpack@3.6.0 -g
安装完之后可以使用webpack查看安装情况
在这里插入图片描述

局部安装

需要局部安装的原因是因为一个项目往往是依赖特定的webpack版本，都有自己局部的webp

最低0.47元/天 解锁文章
时之弧
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue 安装 less-loader 报错 unable to resolve dependency tree
2401_84435739的博客
04-29 423
小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
webpack-less-loader
08-26
webpack入门和实战(二)：全面理解和运用loader和plugins,理解less-loader加载器的使用
解决webpack安装了less-loader，运行报错
qq_44294202的博客
08-11 480
用webpack打包项目，安装了less-loader模块后报错 原因：less-loader安装的版本过高 解决方案： 1、卸载之前的less npm uninstall less-loader 2、重新安装低版本的 npm install less-loader@6.0.0
webpack使用less-loader出错处理
qq_41699954的博客
07-16 1628
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
webpack初体验之less，less-loader报错
weixin_43489472的博客
04-25 1960
使用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：Module build failed: TypeError: loaderContext.getResolve is not a function问题
qq_41055850的博客
07-14 553
错误如下： 我在这里出现的错误原因是安装的 less-loader 版本太高，使用 npm i --save-dev less-loader自动安装了 6.2.0 版本。 在这把原来安装的删除 npm uninstall less-loader，然后安装较低的版本 npm i --save-dev less-loader@4.1.0 ，这里的 --save-dev 是开发时使用的，如果仅学习可加可不加。 换成低版本之后就能打包成功了 ...
Webpack中css-loader和less-loader的使用教程
12-03
本文将详细介绍如何在Webpack配置中使用`css-loader`和`less-loader`。 ### 一、css-loader `css-loader`的主要功能是解析CSS文件，使其能够在JavaScript中被导入。通过`require`或`import`语句，你可以将CSS文件...
style-resources-loader：用于webpackCSS处理器资源加载器
02-04
该加载器是用于webpackCSS处理器资源加载器，它将您的样式资源（例如variables, mixins ）注入到多个导入的css, sass, scss, less, stylus模块中。 它主要用于 在所有样式文件中共享您的variables, mixins, ...
string-replace-loader：为Webpack替换加载器
02-06
不再支持Webpack v4和更低版本，但是您可以在较旧的环境中安装并使用2.3.0的加载程序版本。 用法： 加载程序允许以的方式执行替换（加载程序在内部使用它）。 这意味着，如果你要替换所有出现，
webpack打包less出错
x93008的博客
06-01 2894
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/
TypeError: this.getOptions is not a function 报错：react中使用webpack，却无法对less文件打包
Arsmart的博客
03-27 1624
使用react写前端，需要用webpack做一个打包。之前都是正常运行的，现在加入了less文件就失败了。可以确定问题就在less文件上。下面介绍如何正确加入less文件，并对我发生的错误进行解析。 webpack4 处理less文件 - 不骄不傲 - 博客园 这篇博客中提到的步骤很有帮助，但是一些细节需要额外注意，否则会引发下属错误，因此在此摘录： 1. 安装相关依赖 npm i style-loader css-loader less-loader less -D 注意：此处直接安装极易引发下
React less less-loader的使用，以及‘{’报错解决
weixin_43486426的博客
07-09 3585
React less语法支持编译与less的配置，以及‘{’报错解决（第3步） 本次的less编译，主要基于less-loader这个包 1、首先呢我们需要展开我们的webpack配置文件，这个在react中是默认隐藏的，你需要将它显示出来(注意此操作是不可逆的) npm run eject 2、然后我们需要下载less-loader //less-loader负责打包转码 npm i less less-loader -s //本地化安装less和lessloader 3、然后我们就需要进行环境的
引入less报错：Module build failed: Error: Cannot find module ‘less‘
m0_58122175的博客
07-27 3031
引入less报错：Module build failed: Error: Cannot find module 'less'
webpack配置css-loader以及less-loader
qq_40860137的博客
05-27 309
1.安装 npm istyle-loader（将解析的css文件转换成页面级style） css-loader（解析css文件） less-loader（将less文件解析成css文件）-D 2.配置（在webpack.config.js中） ①css-loader配置 ②less-loader配置
关于打包处理less文件时遇见的问题：
qq_45770253的博客
06-13 667
关于打包处理less文件时遇见的问题： 原因： less-loader安装的版本过高 解决方案： // 第一步 npm uninstall less-loader // 第二步 npm install less-loader@6.0.0
vue项目中安装less-loader依赖包过程中出现的错误
qq_42800159的博客
07-16 1979
1、 可视化面板安装less-loader 用vue脚手架创建的项目默认没有安装less-loader的依赖，要使用less语法，就要安装less-loader相关的工具。 尝试用可视化面板安装less-loader依赖，安装后没有在可视化面板中找到该依赖。为了确认该依赖是否成功安装，去到项目中node_modules目录下寻找less-loader依赖，并未找到。 2、终端安装less-loader报错 2.1 问题描述 2.2 原因分析 安装命令输入错误 install Usage of the
webpack中使用css和less的loader
qq_34412985的博客
02-16 129
css文件打包报错：
webpack4，webpack5-css，less样式文件的兼容
Celester_best的博客
12-11 1283
安装postcss-loader和postcss-preset-env两个库 css文件的兼容性处理 webpack4的样式兼容配置 webpack.config.js中的配置 // 打包css资源 { // 正则表达式,匹配那些文件，匹配以.css结尾的文件 test: /\.css$/, // 使用哪些loader进行处理
ERROR in ./src/index.less (../node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/dist/c
热门推荐
zm_miner的博客
02-02 1万+
当我把所有资源都放在src下面的时候, 执行npx webpack-dev-server打包成功, 当划分js, css, imgs 文件夹以后, 报错 ERROR in ./src/index.less (../node_modules/css-loader/dist/cjs.js!../node_modules/less-loader/dist/cjs.js!./src/index.less) Module build failed (from ../node_modules/less-loader.
安装less-loader 和less
最新发布
09-08
安装less-loader和less的步骤如下： 1. 确定你正在使用的webpack版本。根据webpack的版本选择合适的less-loader版本。例如，如果你使用的是webpack@4，那么可以选择less-loader@5~7版本。 2. 打开命令行终端，运行以下命令来安装less-loader: ``` npm install less-loader@7 --save-dev ``` 3. 确保你已经安装了webpack和webpack-cli。如果还没有安装，请运行以下命令来安装它们: ``` npm install webpack webpack-cli --save-dev ``` 4. 在webpack配置文件（通常是webpack.config.js）中添加less-loader的配置。参考以下示例： ``` module.exports = { // ... module: { rules: [ { test: /.less$/, use: [ { loader: "style-loader" }, { loader: "css-loader" }, { loader: "less-loader", options: { strictMath: true, noIeCompat: true } } ] } ] } }; ``` 5. 在需要使用less语法的样式文件中，将style节点的lang属性设置为'less'。例如： ```html <style lang="less" scoped> /* 样式内容 */ </style> ``` 总结：按照以下步骤安装less-loader和less： 1. 确定webpack的版本，选择合适的less-loader版本； 2. 使用npm命令安装less-loader，例如：npm install less-loader@7 --save-dev； 3. 确保已安装webpack和webpack-cli，如果没有请使用npm install webpack webpack-cli --save-dev安装； 4. 在webpack配置文件中添加less-loader的配置； 5. 在需要使用less语法的样式文件中，将style节点的lang属性设置为'less'。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值