关于Vue+webpack使用unocss编写CSS,打包后CSS没加前缀

关于Vue+webpack使用unocss编写CSS,打包后CSS没加前缀,封装了一个插件去解决了这个问题

unocss-postcss-webpack-plugin

unocss在vite中使用配置,关于unocss在vite中使用,自行查阅官网 https://unocss.dev/integrations/vite ,vite使用unocss就不会出现这样的问题

//vite.config.ts
import { fileURLToPath, URL } from 'node:url'
import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(),vueJsx(),UnoCSS()],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},css: {postcss: {plugins: [require('autoprefixer')({overrideBrowserslist: ['Android >= 6', 'iOS >= 10', 'ie >= 11', 'Firefox >= 35', 'chrome >= 40','safari >= 6']})]},}
})

使用

<template><div><div class="w-200px h-200px bg-gray-400 flex items-center justify-center">vite中使用unocss的写法</div><div class="box">vite中没有使用unocss的写法</div></div>
</template><script setup lang="ts"></script><style scoped>
.box{display: flex;align-items: center;justify-content: center;background-color: red;width: 200px;height: 200px;
}
</style>

CSS展示

1
2

unocss在webpack中使用配置,关于unocss在webpack中使用,自行查阅官网 https://unocss.dev/integrations/webpack

const { defineConfig } = require('@vue/cli-service');
const UnoCSS = require('@unocss/webpack').default
module.exports = defineConfig({lintOnSave: false,transpileDependencies: true,configureWebpack: {plugins: [UnoCSS({})],},css: {loaderOptions: {postcss: {postcssOptions: {plugins: [require('autoprefixer')({overrideBrowserslist: ['Android >= 6', 'iOS >= 10', 'ie >= 11', 'Firefox >= 35', 'chrome >= 40','safari >= 6']})],},},}},
});
<template><div><div class="w-200px h-200px bg-gray-400 flex items-center justify-center">webpack使用unocss的写法</div><div class="box">webpack没有使用unocss的写法</div></div>
</template><script setup lang="ts"></script><style scoped>
.box{display: flex;align-items: center;justify-content: center;background-color: red;width: 200px;height: 200px;
}
</style>

CSS展示

1
2

比较发现,在webpack中,unocss写法的css样式没有添加css前缀,详情可看这个issue https://github.com/unocss/unocss/issues/386

使用unocss-postcss-webpack-plugin插件 webpack中,unocss 添加 postcss 编译 ,配合@unocss/webpack使用,前提已在项目中配置了unocss相关配置,以及项目中的css是单独打包成独立的css文件

install

npm i unocss-postcss-webpack-plugin -D

使用

//vue.config.js
const { defineConfig } = require('@vue/cli-service');
const UnoCSS = require('@unocss/webpack').default
const unocssPostcssWebpackPlugin=require('unocss-postcss-webpack-plugin')
module.exports = {configureWebpack: {plugins: [UnoCSS({}),unocssPostcssWebpackPlugin(), ],},css:{loaderOptions: {postcss: {postcssOptions: {plugins: [require('autoprefixer')({overrideBrowserslist: ['Android >= 6', 'iOS >= 10', 'ie >= 11', 'Firefox >= 35', 'chrome >= 40','safari >= 6']})],},},},extract:true,//这个主要是设置单独打包css,}
}

CSS展示

unocss编写的css样式也加上了css前缀

3

props

PropTypeDefaultdescriptionrequired
overrideBrowserslistArray[‘Android >= 6’, ‘iOS >= 10’, 'ie >= 1,‘Firefox >= 35’, ‘chrome >= 40’,‘safari >= 6’]browserslistfalse

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/106710.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【LeetCode】24. 两两交换链表中的节点

1 问题 给你一个链表&#xff0c;两两交换其中相邻的节点&#xff0c;并返回交换后链表的头节点。你必须在不修改节点内部的值的情况下完成本题&#xff08;即&#xff0c;只能进行节点交换&#xff09;。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,4] 输出&#xf…

Lua在计算时出现非法值,开启Debugger之后不再触发

1&#xff09;Lua在计算时出现非法值&#xff0c;开启Debugger之后不再触发 2&#xff09;从Gamma空间改为Linear空间会导致性能下降吗 3&#xff09;EXR格式在Unity中如何优化 4&#xff09;安卓游戏启动后提示“应用程序异常” 这是第355篇UWA技术知识分享的推送&#xff0c;…

如何抓取AJAX请求

在Python中&#xff0c;可以使用第三方库requests来抓取通过AJAX请求加载的数据。以下是一个示例代码&#xff1a; import requestsurl "https://example.com/ajax-endpoint"payload { "param1": "value1", "param2": "v…

基于VScode 使用plantUML 插件设计状态机

本文主要记录本人初次在VScode上使用PlantUML设计 本文只讲述操作的实际方法&#xff0c;假设java已安装成功 。 1. 在VScode下安装如下插件 2. 验证环境是否正常 新建一个文件夹并在目录下面新建文件test.plantuml 其内容如下所示: startuml hello world skinparam Style …

力扣 -- 1143. 最长公共子序列

解题步骤&#xff1a; 参考代码&#xff1a; class Solution { public:int longestCommonSubsequence(string s1, string s2) {int ms1.size();int ns2.size();s1 s1;s2 s2;vector<vector<int>> dp(m1,vector<int>(n1));for(int i1;i<m;i){for(int j1;j&…

SpringBoot采用集成多个Mybatis框架实现多JDBC数据源 + 多数据源本地事务

目录 1. 原理1.1 实现多数据源的原理1.2 多数据源本地事务的原理 2. Mysql数据准备3. pom.xml依赖4. application.properties配置5. 创建两个SqlSessionFactory5.1 DataSource1Config5.1 DataSource2Config 6. 动态数据源测试6.1 创建User类6.2 Mapper接口实现6.3 Mapper.xml实…

【狂神说】HTML详解

目录 1 HTML概述1.1 什么是HTML1.2 HTML发展史1.3 HTML5的优势1.4 W3C标准 2 网页2.1 网页基本信息2.2 网页基本标签2.2.1 标题标签2.2.2 段落标签2.2.3 换行标签2.2.4 水平线标签2.2.5 字体样式标签&#xff1a;粗体、斜体2.2.6 注释和特殊符号 2.3 图像标签2.4 链接标签邮箱链…

C#串口原理

串口实际有2种。主要是电压逻辑不一样。玩单片机的人指usb转TTL的串口&#xff1b;普通人指USB转DB9的串口&#xff1b;先看下他们的区别&#xff1a; https://doc.embedfire.com/module/module_tutorial/zh/latest/Module_Manual/port_class/serial_port.html 1. 串口外设总结…

PC网站微信扫码登录

PC站通过微信扫码登录网站。 参考文档&#xff1a;微信官方文档 1.通过在PC端打开以下链接&#xff1a; https://open.weixin.qq.com/connect/qrconnect?appidAPPID&redirect_uriREDIRECT_URI&response_typecode&scopeSCOPE&stateSTATE#wechat_redirect 用…

Flink的基于两阶段提交协议的事务数据汇实现

背景 在flink中可以通过使用事务性数据汇实现精准一次的保证&#xff0c;本文基于Kakfa的事务处理来看一下在Flink 内部如何实现基于两阶段提交协议的事务性数据汇. flink kafka事务性数据汇的实现 1。首先在开始进行快照的时候也就是收到checkpoint通知的时候&#xff0c;在…

15.项目讲解之前端页面的实现

项目讲解之前端页面的实现 本项目前端使用HBuilerX软件编写HBuilderX下载安装配置一键直达&#xff0c; uniapp框架uniapp官网&#xff0c; 使用Element-ui组件Element-ui组件网址进行前端页面的完成。 前端项目下载地址 前端项目 前端项目展示 首页 首页展示 echarts实现…

简单的数学运算如何改变算法

简单的数学运算如何影响事物 当你坐在无人驾驶汽车上行驶时&#xff0c;突然发现前面有一个问题。一个亚马逊快递司机将他们的货车开到了一辆双停的UPS卡车旁边&#xff0c;然后才意识到无法通过。现在他们卡住了&#xff0c;你也卡住了。 街道太窄&#xff0c;无法实现U型转弯…

CCF CSP认证 历年题目自练Day32

题目一 试题编号&#xff1a; 202209-1 试题名称&#xff1a; 如此编码 时间限制&#xff1a; 1.0s 内存限制&#xff1a; 512.0MB 问题描述&#xff1a; 题目背景 某次测验后&#xff0c;顿顿老师在黑板上留下了一串数字 23333 便飘然而去。凝望着这个神秘数字&#xff0c;小…

C# Convert和BitConverter类学习

前言&#xff1a; C# Convert是一个比较好用的强制转换&#xff0c;相比我们之前用的(int)或者是类型.Parse()&#xff0c;Convert给我们提供了很多的选项&#xff0c;特别是对于有字节要求的变量&#xff0c;Convert简直就是C#编程的福音&#xff0c;BitConvert对于byte数组转…

linux下文件存储系统(inode/目录项/硬链接)

概念&#xff1a; 关键点&#xff1a; &#xff08;1&#xff09;inode 也叫做文件属性管理结构体 &#xff08;2&#xff09;目录项里面存两个东西 文件名和 inode号。通过inode号可以找到磁盘上的文件。 &#xff08;3&#xff09;给文件创建硬链接的时候&#xff0c;两个…

中国矿业大学-JAVA期末备考

JAVA里面&#xff0c;“”和“equals"的区别是什么呢&#xff1f; 1.""操作符用于比较两个对象的引用是否相等。也就是说&#xff0c;它会检查两个对象是否指向内存中的同一个地址。如果两个对象的引用完全相同&#xff0c;则""返回true&#xff1b;否…

uniapp 小程序实现图片宽度100%、高度自适应的效果

因为image组件默认是有宽度跟高度的&#xff0c;所以这个高度不怎么好写 通过load事件来控制图片的高度 话不多说&#xff0c;直接上代码&#xff0c; <image class"img" src"/static/image.png" :style"{ height: imgHeight px }"mode&q…

CentOS 7 服务器上创建新用户及设置用户密码有效期

一、创建用户 1、以 root 用户身份登录到 CentOS 服务器 2、运行以下命令以创建新用户&#xff1a; useradd -m -s /bin/bash username其中&#xff0c;username 是您要创建的新用户的用户名。该命令将创建一个新用户并为其分配一个主目录。3、运行以下命令以设置新用户的密码…

Frame Buffer设备驱动 (ili9488 3.5寸tft屏)

Frame Buffer设备驱动 Frame Buffer设备ili9488介绍驱动编写代码编写ili9488.c设备树修改测试ili9488代码分析 LCD资料下载 Frame Buffer设备 在早期的输出显示设备中&#xff0c;大部分为CRT显示器&#xff0c;随着技术的不断发展&#xff0c;现在大部分使用的是液晶显示器。这…

MySQL视图、用户管理和C语言链接

文章目录 1. 视图1.1 基本使用 2. 用户管理2.1 用户信息2.2 创建用户2.3 修改用户密码2.4 删除用户 3. 数据库的权限3.1 给用户授权3.2 回收权限 4. mysql connect4.1 Connector/C 使用4.2 mysql接口介绍 1. 视图 视图是一个虚拟表&#xff0c;其内容由查询定义。同真实的表一…