[mini-css-extract-plugin]Conficting order between告警warning(vue构建打包)

最新推荐文章于 2024-08-09 07:30:56 发布

梓喻

最新推荐文章于 2024-08-09 07:30:56 发布

阅读量917

点赞数

分类专栏： webapck vue 文章标签： Conflicting order between vue打包告警配置警告

本文链接：https://blog.csdn.net/wzp20092009/article/details/125974948

版权

vue 同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

webapck

2 篇文章 0 订阅

订阅专栏

在执行npm run build时遇到关于mini-css-extract-plugin的警告，问题源于CSS导入顺序不一致。通过调整组件导入顺序，将CommonSearch组件的导入放在FPageStructure组件之前，成功解决了这个加载顺序冲突的问题，从而避免了打包时的黄色warning信息。

摘要由CSDN通过智能技术生成

问题:

npm run build打包时发现项目出现了黄色的 warning 信息

[mini-css-extract-plugin]
Conflicting order between

在这里插入图片描述

解读

从字面意思为，mini-css-extract-plugin在加载组件时顺序冲突了。

我在查看组件时发现，后面的组件CommonSearch使用时在前，但在加载时顺序import写在后面，所以导致了加载冲突的告警。

解决方案

修改加载顺序
~~原来错误的~~

import FPageStructrue from '@/components/FPageStructure/index';
import CommonSearch from '@/components/CommonSearch/index';

调整过来即可

import CommonSearch from '@/components/CommonSearch/index';
import FPageStructrue from '@/components/FPageStructure/index';

附[mini-css-extract-plugin]

https://www.npmjs.com/package/mini-css-extract-plugin

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

梓喻

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

mini-css-extract-plugin源码解析

vv_bug

08-19

3063

前言前面我们写过几篇关于webpack的文章： webpack源码解析一 … webpack源码解析七（optimization）然后结合之前babel、eslint知识搭了一个比较复杂的vue项目： webpack实战之（手把手教你从0开始搭建一个vue项目）手把手教你从0开始搭建一个vue项目（完结）在实战demo中我们有用到一个css的插件mini-css-extract-plugin,今天我们结合demo来分析一下源码。简介 This plugin extracts CSS in

npm run build 报错 vue[mini-css-extract-plugin]Conflicting order between

冒烟筒的博客

02-10

610

不同页面都引用了两个或多个公共组件，但引入顺序不一样，导致的警告

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

Taro nutUI 出现 [mini-css-extract-plugin] Conflicting order 报错

PokoMobula的博客

05-21

188

你也可以不使用 unplugin-vue-components 插件这种自动按需引入样式的方式，而是在项目入口处手动注册组件、引入对应组件的样式，这样所有组件样式的顺序由自己控制，当然不会出现这个问题，但是实在很麻烦。1、如果你的文件中出现了下面这种使用方式，在不同的页面中引入相同样式时的顺序不同，mini-css-extract-plugin 插件将认为这是错误的，因为样式的先后顺序可能会影响实际的表现效果。NutUI 各个组件的样式之间没有冲突，即其顺序是。

mini-css-extract-plugin 使用教程

最新发布

gitblog_00899的博客

08-09

1110

mini-css-extract-plugin 使用教程 mini-css-extract-pluginLightweight CSS extraction plugin项目地址:https://gitcode.com/gh_mirrors/mi/mini-css-extract-plugin 项目介绍 mini-css-extract-plugin 是一个基于 webpack v5 的插件，用...

vue[mini-css-extract-plugin]Conflicting order between 警告解决方式

pnjtvxcp的博客

05-13

2355

vue打包的时候报vue[mini-css-extract-plugin]Conflicting order between 警告，特地去网上找了一下解决方法，在这里记录一下，转自:墨水白云博主原创文章地址:https://blog.csdn.net/lxy869718069/article/details/103504654 问题出现：大体意思是说 mini-css-extract-plugin 这个插件在js里css的引入顺序导致的问题，如上图所述，就是指 component-..

打包警告：chunk common [mini-css-extract-plugin]Conflicting order between:

m0_62651421的博客

06-28

472

mini-css-extract-plugin 生产环境打包的时候会启用，css引入顺序不一致就会发出警告；- vue.config.js配置。或者：调整组件引入的顺序。

mini-css-extract-plugin Conflicting order 警告解决

学如逆水行舟，不进则退

02-22

5374

出處

taro报错运行报错chunk common [mini-css-extract-plugin] Conflicting order between: ......

qq_44472790的博客

10-28

2078

具体错误如下： chunk common [mini-css-extract-plugin] Conflicting order between: css ./node_modules/css-loader/dist/cjs.js??ref–2-oneOf-0-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@tarojs/mini-runner/node_modules/postcss-loader/di

【警告】chunk base [mini-css-extract-plugin] Conflicting order between:

m0_47802926的博客

11-30

4662

问题阐述：复现场景：小程序使用分包后不同页面引入相同组件顺序不一致。 ⚠️ 编译警告. 2021/11/30 上午10:58:17 chunk common [mini-css-extract-plugin] Conflicting order between: * css ./node_modules/@tarojs/mini-runner/node_modules/css-loader/dist/cjs.js??ref--6-oneOf-0-1!./node_modules/postcss-l

chunk 0 [mini-css-extract-plugin] 解决 CSS Modules 警告

热门推荐

cuandeqin2083的博客

06-29

1万+

前言前两周，用公司的CI部署的时候，发现很鲜明的ERR！其实这个这个只是一个warning。但是由于环境变量（process.env.ci === true）。所以这个warning被转化成了error，导致了编译失败。一般的CI服务器会自动将这个这设置为true。解决方案因为知道了原因，所以解决方案有以下两个修复这个warning。让运维小哥哥帮忙把这个环境变量设置为false。...

mini-css-extract-plugin.jpg

07-10

mini-css-extract-plugin 打包结果示意

Module build failed (from ./node_modules/_mini-css-extract-plugin@0.8.0@mini-css-extract-plugin/dist

weixin_41973410的博客

01-21

6196

今天在taro项目中引入taro-ui，编译时报错如下： Module build failed (from ./node_modules/_mini-css-extract-plugin@0.8.0@mini-css-extract-plugin/dist/loader.js): ModuleBuildError: Module build failed (from ./node_modules/_less-loader@5.0.0@less-loader/dist/cjs.js): @import “~

4、处理css文件（css-loader加载器与mini-css-extract-plugin分离CSS文件插件）

weixin_45065754的博客

05-10

1055

1、安装依赖 2、配置loader加载器 3、安装分离CSS文件插件 4、配置loader 5、配置插件

webpack使用mini-css-extract-plugin时报错TypeError: Invalid value used in weak set

weixin_45747941的博客

05-31

465

打包运行时抛出chunk name [mini-css-extract-plugin] Conflicting order. Following module has been added错误！

Terenceno的博客

03-23

4732

打包抛出警告：chunk common [mini-css-extract-plugin] Conflicting order between 的解决办法！

编译警告.chunk common [mini-css-extract-plugin]

qq_42276327的博客

02-22

2284

编译警告.chunk common [mini-css-extract-plugin] 使用Taro开发微信小程序时，运行npm run dev:weapp后报了这个警告。虽然对运行没有影响，但强迫症看着十分难受。原因：不同的页面引入了两个相同的组件，但是顺序先后不同。更改过来后，warning fixed。 ...

vue2项目从webpack3升级至webpack5

weixin_44846765的博客

08-06

3267

接下来就是package.json的启动方式，由于webpack-dev-server升到了4版本用来配套webpack5，启动脚本需要改写一下。接下来就是package.json的启动方式，由于webpack-dev-server升到了4版本用来配套webpack5，启动脚本需要改写一下。这个问题是比较棘手的，因为是webpack内部的问题，首先第一种方法就是很简单的进行webpack-dev-server的卸载再重装。其余的对于其中进行报错的包问题就该重装重装，该进行安装安装就完成啦。...

mini-css-extract-plugin有什么用

03-01

mini-css-extract-plugin是一个用于将CSS代码从JavaScript文件中提取出来的webpack插件。它的主要作用是将CSS代码单独打包成一个独立的CSS文件，而不是将CSS代码嵌入到JavaScript文件中。使用mini-css-extract-plugin可以带来以下好处： 1. 代码分离：将CSS代码与JavaScript代码分离，使得浏览器可以并行加载多个资源，提高页面加载速度。 2. 缓存优化：将CSS代码单独打包成一个文件后，可以利用浏览器的缓存机制，减少重复加载CSS的次数。 3. 提高开发效率：在开发过程中，可以实时更新CSS样式，而无需重新编译整个JavaScript文件。使用mini-css-extract-plugin的步骤如下： 1. 在webpack配置文件中引入mini-css-extract-plugin。 2. 在plugins配置项中实例化mini-css-extract-plugin，并指定输出的CSS文件名。 3. 在module配置项中配置相应的loader，用于处理CSS文件。