关于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就不会出现这样的问题

js 复制代码
//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'
              ]
          })
      ]
  },
  }
})

使用

js 复制代码
<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展示


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

js 复制代码
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'
                        ]
                    })
                  ],
                },
            },
        }
    },
});
js 复制代码
<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展示


比较发现,在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

使用

js 复制代码
//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前缀

props

Prop Type Default description required
overrideBrowserslist Array ['Android >= 6', 'iOS >= 10', 'ie >= 1,'Firefox >= 35', 'chrome >= 40','safari >= 6'] browserslist false
相关推荐
Devil枫4 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
GIS程序媛—椰子5 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
毕业设计制作和分享6 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
程序媛小果6 小时前
基于java+SpringBoot+Vue的旅游管理系统设计与实现
java·vue.js·spring boot
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
TangAcrab6 小时前
unocss 添加支持使用本地 svg 预设图标,并支持更改大小
unocss·miniapp
凉辰7 小时前
设计模式 策略模式 场景Vue (技术提升)
vue.js·设计模式·策略模式
薛一半9 小时前
PC端查看历史消息,鼠标向上滚动加载数据时页面停留在上次查看的位置
前端·javascript·vue.js
MarcoPage9 小时前
第十九课 Vue组件中的方法
前端·javascript·vue.js
工业互联网专业9 小时前
Python毕业设计选题:基于Hadoop的租房数据分析系统的设计与实现
vue.js·hadoop·python·flask·毕业设计·源码·课程设计