首页 > 其他分享 >关于vue2中使用unocss样式无法生效的问题

关于vue2中使用unocss样式无法生效的问题

时间:2023-05-04 13:23:16浏览次数:46  
标签:node vue 样式 modules loader vue2 unocss js css

前言

在维护公司一个技术栈为 vue2 + ts + unocss 的老项目时发现 unocss 在开发环境和正式环境都不能生效,最先以为是插件的版本问题,排查后发现是因为项目在使用 unocss 时的配置没有配置完全,根据 vue-cli 的版本按照 unocss 的官方仓库里的 example 配置 vue.config.js
这是 vue-cli4 的版本配置

const UnoCSS = require("@unocss/webpack").default;

module.exports = {
 configureWebpack: {
  plugins: [UnoCSS({})],
 },
 chainWebpack(config) {
  config.module.rule("vue").uses.delete("cache-loader");
  config.module.rule("tsx").uses.delete("cache-loader");
  config.merge({
   cache: false,
  });
 },

 // 发现这个没有配置
 css: {
  extract: {
   filename: "[name].[hash:9].css",
  },
 },
};

配置完成后发现又报错

Failed to compile.

chunk 5 [mini-css-extract-plugin]
Conflicting order. Following module has been added:
 * css ./node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--11-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!./node_modules/style-resources-loader/lib??ref--11-oneOf-1-4!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/unplugin/dist/webpack/loaders/transform.js?unpluginName=unocss%3Awebpack!./src/components/catalogue/catalogue-item.vue?vue&type=style&index=0&id=483cc5ed&lang=less&scoped=true&
despite it was not able to fulfill desired ordering with these modules:
 * css ./node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/src??ref--11-oneOf-1-2!./node_modules/less-loader/dist/cjs.js??ref--11-oneOf-1-3!./node_modules/style-resources-loader/lib??ref--11-oneOf-1-4!./node_modules/vue-loader/lib??vue-loader-options!./node_modules/unplugin/dist/webpack/loaders/transform.js?unpluginName=unocss%3Awebpack!./src/components/catalogue/create-catalogue-modal.vue?vue&type=style&index=0&id=3b6286ee&lang=less&scoped=true&
   - couldn't fulfill desired order of chunk group(s)
   - while fulfilling desired order of chunk group(s) , ,

查询得知 是因为文件的重复编译导致的
由于是老项目 所以当然是最简单的解决办法:

  • 编译时忽略排序
    在 vue.config.js 下方,将 css 配置修改为
    // vue.config.js
    css: {
      extract: {
        filename: "[name].[hash:9].css",
        ignoreOrder: true
      },
    },
    

参考来源

标签:node,vue,样式,modules,loader,vue2,unocss,js,css
From: https://www.cnblogs.com/GoodMemoryBlog/p/17370935.html

相关文章

  • vue学习 第十天(1) css高级技巧 ----CSS用户界面样式 / vertical-align属性应用
    用户界面样式 1)鼠标样式cursorli{cursor:pointer;}设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 2、轮廓线outline给表单添加outline:0;或者outline:none;样式之后,就可以去掉默认的蓝色边......
  • Vue2入门之超详细教程八-计算属性
    1、简介计算属性:1.定义:要用的属性不存在,要通过已有的属性计算得来2.原理:底层借助Object.defineproperty方法提供的getter和setter3.Get函数什么时候执行?(1) 初次读取时会执行一次(2) 当依赖的数据发生改变时会被再次......
  • vue2实现数据聚合【scatter-clustering】组件封装
    实现如下效果:效果展示:https://code.juejin.cn/pen/7228568245148581943如果不会请移步到官网的栗子,请点击查看直接给大家上代码:整体代码片段1<template>2<divref="echarts"style="width:100%;height:300px;"></div>3</template>4<scrip......
  • 有图层样式生成符号库
    importarcpyimportsqlite3aprx=arcpy.mp.ArcGISProject(r"CURRENT")m=aprx.activeMapgroupLayer=arcpy.GetParameterAsText(0)lyrs=m.listLayers()stylx_path=arcpy.GetParameterAsText(1)stylxDB=sqlite3.connect(stylx_path)cursor......
  • 用vue2封装轮播图组件
    日常练习用vue2封装轮播图组件,传入图片信息数组。实现思想:图片组添加translate动画,通过轮播到第几张图片作为参数,让图片组整体移动。Carousel.vue<template><divclass="carousel"><divclass="carouselList"><!--图片列表--><ulclass="img&quo......
  • LayerDrawable层叠样式layer-list
    layer-list可以将多个图片按照顺序层叠起来。语法:在drawalbe/drawable-layer.xml中<layer-listxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:drawable="@android:color/white"/><itemand......
  • 答题积分小程序云开发实战-界面交互篇:答题页布局样式与逻辑交互开发
    微信小程序云开发实战-答题积分赛小程序界面交互篇:答题页布局样式与逻辑交互开发答题页原型稿实现思路分析:1)答题未选中状态;2)答题已选中状态,点击确定提交选中结果;3)显示答案以及题目解析,如回答正确,自动进入下一题;如回答错误,停留在当前答题页面;4)每次答完10题,答对分数才会计入积分;5)最后......
  • Android 用户界面---样式和主…
    样式是给View或Window指定外观和格式的属性集合。样式能够指定如高、边距、字体颜色、字体尺寸、背景颜色等属性。样式被定义在一个与布局XML文件分开的XML资源文件中。Android中的样式与Web设计中的层叠式样表类似,允许与内容分开设计。例如,通过使用样式,可以把下面这个布局XML转换......
  • TileServer GL的样式怎么配置图层层级
    在TileServerGL的样式中,可以通过minzoom和maxzoom属性来配置图层的层级范围。minzoom属性用于指定最小层级,即在什么层级下才会显示该图层。例如,如果将minzoom属性设置为10,则该图层只会在层级大于等于10时显示。maxzoom属性用于指定最大层级,即在什么层级下该图层将不......
  • TileServer GL图层样式的layout属性
    在TileServerGL的样式中,layout属性用于定义图层布局参数。以下是一些常见的layout属性及其说明:visibility:指定图层是否可见。line-cap:指定线条末端的外观样式(butt、round、square)。line-join:指定连接线段的类型(miter、bevel、round)。line-miter-limit:指定mitre连接的miter......