nuxt项目:css相关插件加载顺序问题【extract-css-chunks-webpack-plugin】

简介: nuxt项目:css相关插件加载顺序问题【extract-css-chunks-webpack-plugin】

一、warning信息

chunk pages/channelManagement/qualification/create/pages/channelManagement/qualification/detail/pages/chan/c61aa583 [extract-css-chunks-webpack-plugin]    
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--5-oneOf-1-2!./node_modules/less-loader/diref--5-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-1-3!./node_modules/sass-resources-loader/lib/loader.js??ref--5-oneOf-1-4!./node_modulduleComponents/newPolicyManagement/stamp-comfies/vue-loader/lib??vue-loader-options!./src/moduleComponents/newPolicyManagement/stamp-comfirm-dialog.vue?vue&type=style&index=0&id=e864c8c4&scoped=true&lang=less&
despite it was not able to fulfill desired ordering with these modules:                                                                                    ref--5-oneOf-1-2!./node_modules/less-loader/di
 * css ./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??duleComponents/channelManagement/qualificationref--5-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--5-oneOf-1-3!./node_modules/sass-resources-loader/lib/loader.js??ref--5-oneOf-1-4!./node_modules/vue-loader/lib??vue-loader-options!./src/moduleComponents/channelManagement/qualification/picInfoCard.vue?vue&type=style&index=0&lang=less&
   - couldn't fulfill desired order of chunk group(s) pages/channelManagement/qualification/detail, pages/channelManagement/qualification/exchange
   - while fulfilling desired order of chunk group(s) pages/channelManagement/qualification/create

二、问题分析:

插件引入顺序的问题:nuxt项目中,两个及以上的.vue文件,引入同样的自定义组件,引入的先后顺序需要一样,否则就有对应的warning。

三、解决问题:

四、 代码:

extractCSS: {
   ignoreOrder: true
},

成功解决了!

相关文章
|
3月前
|
JavaScript 容器
jquery和CSS3图片排序过滤搜索插件
Filterizr是一款jquery和CSS3图片排序过滤插件。它可以对一组图片进行排序,按条件过滤和按关键字搜索。并在显示结果时使用指定的CSS3动画过渡效果。
40 2
|
3月前
|
JavaScript
jquery和CSS3响应式轮播图插件jcSlider
jcSlider是一款jquery和CSS3响应式轮播图插件。jcSlider使用CSS3过渡动画,它可以和animate.css完美结合,生成60多种轮播图过渡动画效果。
|
3月前
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
78 21
|
4月前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
147 7
|
4月前
|
前端开发
纯css3经典列表式手风琴插件
这是一款十分经典的纯css3列表手风琴插件。该插件使用css兄弟选择器和:target伪类来实现。
|
4月前
|
前端开发 JavaScript
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
手敲Webpack 5:React + TypeScript项目脚手架搭建实践
|
7月前
|
JavaScript 前端开发 API
解锁前端开发新境界:Vue.js携手Webpack,打造高效构建流程,你的项目值得拥有!
【8月更文挑战第30天】随着前端技术的发展,模块化与组件化趋势愈发显著。Vue.js 以其简洁的 API 和灵活的组件系统,深受开发者喜爱;Webpack 则凭借强大的模块打包能力成为前端工程化的基石。两者结合,不仅简化了组件编写与引用,还通过模块热替换、代码分割等功能大幅提升开发效率。本文将通过具体示例,展示如何利用 Vue.js 和 Webpack 构建高效、有序的前端开发环境。从安装配置到实际应用,逐步解析这一组合的优势所在。
72 0
|
7月前
|
缓存 JSON JavaScript
简单介绍下从零搭建 Webpack 项目
本文详细介绍了Webpack中Loader的概念及其重要性。Webpack仅支持处理JS和JSON文件,而Loader能够帮助处理其他类型的文件,如CSS、图片等,并将其转换为有效的模块。文章首先解释了Loader的基本原理,接着介绍了几种常见Loader的配置和使用方法
38 1
|
7月前
|
JavaScript 测试技术
在不同 webpack 版本的 Vue 项目中配置 Storybook
在不同 webpack 版本的 Vue 项目中配置 Storybook
|
7月前
|
前端开发 JavaScript API