关于vue安装less和webpack版本冲突问题

最新推荐文章于 2024-09-16 14:15:11 发布

SepstoneTang

最新推荐文章于 2024-09-16 14:15:11 发布

阅读量4.7k

点赞数 3

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_38756992/article/details/123896734

版权

关于vue2.0安装less和webpack版本冲突问题

1.学会查看自己webpack和less指令
2.默认安装less-loader命令
3.解决办法

1.学会查看自己webpack和less指令

查看当前webpack版本
npm view webpack version
查看当前webpack所有版本
npm view webpack versions
不建议使用太新版本的

2.默认安装less-loader命令

npm i less-loader 这时会默认安装最新版本
然后启动项目 npm run serve 出现如下错误
在这里插入图片描述

3.解决办法

3.1卸载安装的less-loader

npm uninstall less-loader

3.2安装指定版本的webpack

npm install webpack@4.0.0 -g

3.3安装指定版本的less和less-loader

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

在这里插入图片描述

3.4再启动成功
在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SepstoneTang

关注关注

3
点赞
踩
10

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Webpack打包LESS或SASS资源详解

ByteWhizX的博客

09-30

205

在上述配置中，我们指定了入口文件（entry）和输出文件（output），并配置了两个加载规则（rules）来处理LESS和SASS文件。通过使用Webpack和相应的加载器，我们可以方便地将多个LESS或SASS文件打包成一个静态资源文件，并在项目中使用。Webpack将根据配置文件中的设置，将入口文件及其所引入的LESS和SASS文件打包到指定的输出目录（在配置文件中指定的dist目录下），生成一个名为bundle.js的文件。最后，我们需要在HTML文件中引入打包后的文件，以应用样式。

webpack4，webpack5-css，less样式文件的兼容

Celester_best的博客

12-11

1414

安装postcss-loader和postcss-preset-env两个库 css文件的兼容性处理 webpack4的样式兼容配置 webpack.config.js中的配置 // 打包css资源 { // 正则表达式,匹配那些文件，匹配以.css结尾的文件 test: /\.css$/, // 使用哪些loader进行处理

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

less-loader版本不匹配webpack版本

Mecying的博客

04-12

1728

需要把less-loader版本降下来。因为webpack5.0的依赖貌似合适，所以保持4.46版本。

安装less-loader5出现webpack版本不兼容

福仔的博客

02-14

3056

但是安装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-loader版本冲突问题报错Rule can only have one resource source

weixin_48210599的博客

07-31

2577

开始启动项目提示了没有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 less-loader最新版不匹配

Slamande的博客

11-21

4523

There might be a problem with the project dependency tree. It is likely not a bug in Create React App, but something you need to fix locally. The react-scripts package provided by Create React App requires a dependency: "webpack": "4.44.2" Don't try t

Vue实战指南：Vue安装使用Less，解决与Webpack的冲突

一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！

09-16

2775

然而，在集成Less到Vue项目中时，我们可能会遇到一些配置上的挑战，特别是当涉及到Webpack这样的构建工具时。在Vue项目中，Webpack通常通过Vue CLI来配置，用以编译和优化我们的代码。通过以上步骤和示例，你应该已经掌握了如何在Vue项目中集成Less，并且知道如何避免与Webpack之间的潜在冲突。接下来就可以开始尝试将Less应用到你的项目中，享受更高效的样式管理带来的便利吧。希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。

Vue全家桶之webpack详解(四)

2401_84091468的博客

04-20

891

如果你看到3.6.0，说明你已经成功安装了webpack3.6.02、准备工作首先创建如下文件和文件夹dist文件夹：用于存放之后打包的文件src文件夹：用于存放我们写的源文件main.js项目的入口文件定义了一些数学工具函数，可以在其他地方引用，并且使用。index.html浏览器打开展示的首页html通过npm init生成的，npm 包管理的文件2.1、js文件的打包现在的 js 文件中使用了模块化的方式进行开发，他们可以直接使用吗？不可以。

脚手架vue-cli工程webpack的作用和特点

10-17

2. 加载器（Loaders）：Webpack本身只能处理JavaScript和JSON文件，通过使用加载器，Webpack可以处理其他类型的文件（如.vue、.css、.less、图片等）。加载器是将非JavaScript资源转换成JavaScript模块，然后通过...

《Vue入门到精通系列之三》--- webpack详解

2301_82244343的博客

04-20

1291

从本质上来讲，webpack是一个现代的JavaScript应用的静态模块打包工具模块和打包package.json中的scripts的脚本在执行时，会按照一定的顺序寻找命令对应的位置。首先，会寻找本地的node_modules/.bin路径中对应的命令。如果没有找到，会去全局的环境变量中寻找。如何执行我们的build指令呢？1.6.css-loader的使用loader是webpack中一个非常核心的概念。webpack用来做什么呢？

这是一个基于vue20和webpack20的多页面的模板

08-10

Vue.js和Webpack是现代前端开发中的两个重要工具。Vue.js是一个轻量级的渐进式JavaScript框架，以其易用性和可扩展性而受到广大开发者喜爱。Webpack则是一个模块打包工具，能够有效地管理和优化项目的资源，使得开发...

前端选型（VUE+Webpack+Less）

07-17

前端选型文档主要针对之前的开发模式JQ+css+SVN 跟VUE+webpack+less+git的一个对比

解决 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 报错

weixin_42438002的博客

07-19

6311

解决 webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 报错目前存在这种情况，可能是三个原因造成的 1.webpack版本与vue版本不一致 2.本地运行IP地址不正确 3.本地运行localhost与127.0.0.1映射被修改 1.webpack版本与vue版本不一致查看vue版本 vue -V 2.9.6 卸载、安装对应版本webpack npm uninstall webpack-de

＞ dev ＞ webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

chanyeolchichi的博客

05-13

5439

> dev> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js 使用npm run dev 产生了错误。目前存在这种情况，可能是三个原因造成的 1.webpack版本与vue版本不一致 2.本地运行IP地址不正确 3.本地运行localhost与127.0.0.1映射被修改 1.webpack版本与vue版本不一致 1.查看vue版本 vue -V 4.5.15 2.卸载、安装对应版本we.

webpack版本及less等版本的查看方式（持续添加）

DespairA的博客

02-23

1624

1.查看webpack的版本 npm view webpack versions 得到如下 2.查看less-loader版本 npm view less-loader versions 得到如下

webpack创建的vue项目项目使用less

m0_63281943的博客

08-10

519

webpack创建的vue项目项目使用less

webpack最新版问题解决一览（结合尚硅谷webpack教程食用）

returnadsss的博客

09-27

1022

webpack版本问题解决一览

React中不同webpack版本如何配置less(推荐阅读)

hsany330的专栏

05-12

1428

很多人会纳闷为什么网上的webpack配置less的内容中的webpack.config.dev.js和自己的webpack.config.dev.js展示出来的不一样，那是因为webpack版本不一致造成的，之前过早的帖子只是针对于老版本的webpack配置，不适合新版本，下面我将分别给大家给出高低版本的webpack配置less的方案如果用create-react-app创建出react项目，那么如下图所示，所有安装的的东西会放在scripts中 09_57_29__12_11_2018.jp

webpack

喵喵的博客

06-25

408

用npm装插件在终端上输出指令生成的默认的package.json：npm init -y 在终端上输出指令用npm i来直接安装模块：如安装jquery命令为，npm i jquery -S，安装的包放在node_modules 扩展： -D后，安装包会在package中的 devDependencies对象中。简称dev。dev是在开发环境中要用到的。 -S后，安装包会在package中...

npm安装less和less loader vue3

最新发布

02-22

### 安装配置 Less 和 Less-Loader 对于 Vue 3 项目而言，在安装和配置 `less` 及其加载器 `less-loader` 的过程中，需遵循特定步骤来确保一切正常运作。 #### 执行必要的软件包安装在项目根目录下运行如下命令以安装所需的开发依赖项： ```bash npm install less less-loader --save-dev --legacy-peer-deps ``` 此操作会下载并安装最新稳定版的 `less` 编译器以及兼容 Webpack 版本的 `less-loader` 加载器[^4]。参数 `--legacy-peer-deps` 能够帮助解决潜在的 peer dependency 错误。 #### 修改构建配置支持 .less 文件解析为了让 `.less` 文件能够被正确识别与编译，需要调整项目的 Webpack 配置。如果使用的是 Vue CLI 创建的应用程序，则可以通过修改 `vue.config.js` 来实现这一点（而非直接编辑 webpack 配置文件）。添加或更新 rules 数组中的条目以便匹配所有的 `.less` 文件路径模式，并指定相应的加载器链路: ```javascript module.exports = { css: { loaderOptions: { less: { // 这里的选项将会传递给 less-loader } } }, chainWebpack: config => { const types = ['vue-modules', 'vue', 'normal-modules', 'normal']; types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type)) ); } }; function addStyleResource(rule) { rule.use('style-resource') .loader('style-resources-loader') .options({ patterns: [ path.resolve(__dirname, './src/assets/styles/variables.less') // 自定义样式变量等全局资源 ] }); } ``` 上述代码片段展示了如何通过 `chainWebpack` 方法向现有的 Webpack 规则集中注入新的规则，从而允许 `.less` 文件作为模块导入时自动应用这些设置[^1]。 #### 使用 Less 在组件内编写样式一旦完成了以上两步之后，在任何单文件组件 (SFCs) 中都可以利用 `<style>` 标签内的 `lang="less"` 属性来启用 LESS 语法的支持了： ```html <template>  </template> <script> export default {}; </script> <style lang="less" scoped> // 此处可以书写Less样式的CSS代码 </style> ``` 这样便可以在不改变原有工作流的情况下享受预处理器带来的便利特性了[^2]。 #### 处理可能出现的问题有时可能会遇到一些问题，比如版本冲突或是找不到已安装的依赖等问题。此时建议检查 `package.json` 文件中关于 `less` 和 `less-loader` 的版本号是否合适；必要时手动设定具体版本范围如 `"less": "^3.9", "less-loader": "^5.0.0"` 并重新执行 `npm install` 操作来进行修复。