关于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
相关推荐
子兮曰35 分钟前
🚀Vue3异步组件:90%开发者不知道的性能陷阱与2025最佳实践
前端·vue.js·vite
kk不中嘞3 小时前
浅谈前端框架
前端·vue.js·react.js·前端框架
影子信息4 小时前
el-tree 点击父节点无效,只能选中子节点
前端·javascript·vue.js
徐小夕4 小时前
用Vue3写了一款协同文档编辑器,效果简直牛!
前端·javascript·vue.js
小菜全5 小时前
打包 Uniapp
javascript·vue.js·html5
一枚前端小能手5 小时前
🔥 老板要的功能Webpack没有?手把手教你写个插件解决
前端·javascript·webpack
小高0077 小时前
🔥🔥🔥Vue部署踩坑全记录:publicPath和base到底啥区别?99%的前端都搞错过!
前端·vue.js·面试
lozhyf7 小时前
固定资产管理系统(vue+Springboot+mybatis)
vue.js·spring boot·mybatis
Hashan8 小时前
你知道Webpack解决的问题是什么嘛?
前端·webpack