vite配置postcss-autoprefixer,实现自动添加css属性前缀

这篇具有很好参考价值的文章主要介绍了vite配置postcss-autoprefixer,实现自动添加css属性前缀。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

vite: 4.1.4

首先去vite官网逛逛,因为autoprefixer属于postcss类,所以在官网的配置共享配置中找到关于css.postcss配置项

vite配置postcss-autoprefixer,实现自动添加css属性前缀

发现vite对于postcss有两种不同的配置方式:1.内联配置 2.开发者使用postcss-load-config插件推荐的配置方法(vite内置了postcss-load-config插件)具体怎么配置可以看插件官网 GitHub - postcss/postcss-load-config: Autoload Config for PostCSSzAutoload Config for PostCSS. Contribute to postcss/postcss-load-config development by creating an account on GitHub.https://github.com/postcss/postcss-load-config

这里我选择内联配置(懒得新建一个文件了), 这里要注意对于postcss配置对象里的plugins选项vite只支持数组格式,大概长这样:

vite配置postcss-autoprefixer,实现自动添加css属性前缀

 

接着下载

npm i autoprefixer -D 

然后在vite.config.json里加入

// vite.config.json
export default defineConfig({
   // ......
   css: {
      postcss: {
        plugins: [
          require('autoprefixer')()
        ]
      }
    }
})

这里autoprefixer就采取默认配置了不单独配置了没啥用,具体配置去autoprefixer文档里看

GitHub - postcss/autoprefixer: Parse CSS and add vendor prefixes to rules by Can I Use

最后测试成功自动加了前缀

vite配置postcss-autoprefixer,实现自动添加css属性前缀 文章来源地址https://www.toymoban.com/news/detail-469788.html

到了这里,关于vite配置postcss-autoprefixer,实现自动添加css属性前缀的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Vue3+Vite项目按需自动导入配置及常见问题修复

    解决的问题:避免在每个vue组件中都重复性的去声明ref,reactive等。如下: 1.1 配置 unplugin-auto-import 具体配置: 安装vite插件: unplugin-auto-import 1.2 可能遇到ts,eslint不识别而导入报错的问题 1、typescript 报错: \\\'reactive\\\' is not defined. 原因 :TS未识别到vue api,没有相应的模块声明文件

    2024年02月16日
    浏览(55)
  • Vue3+Vite项目引入Element-plus并配置按需自动导入

    我使用的是 pnpm ,并且顺便将 element-plus/icons 一起引入 如果您使用 Volar,请在根目录下 tsconfig.json 中通过 compilerOptions.type 指定全局组件类型 3.1 首先你需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件 3.2 然后把下列代码插入到根目录下 vite.config.ts 文件中 Element-lus官

    2024年02月13日
    浏览(63)
  • vite初始化vue3项目(配置自动格式化工具与git提交规范工具)

    初始化项目 vite构建vue项目还是比较简单的,简单配置选择一下就行了 初始化命令 初始化最新版本vue项目 2. 基本选项含义 Add TypeScript 是否添加TS ADD JSX是否支持JSX ADD Vue Router是否添加Vue Router路由管理工具 ADD Pinia 是否添加pinia(状态管理工具) Add ESLinit 是否添加ESLint是否添加

    2024年02月12日
    浏览(60)
  • 1-07 React配置postcss-px-to-viewport

    移动端适配 安装依赖:在项目根目录下运行以下命令安装所需的依赖包: 配置代码 重新启动开发服务器:如果你的开发服务器正在运行,请重新启动它以应用新的配置。 之后当我们写px时会自动转换成vm单位

    2024年02月08日
    浏览(37)
  • postcss-pxtorem适配插件动态配置rootValue(根据文件路径名称,动态改变vue.config里配置的值)

    项目背景:一个项目里有两个分辨率的设计稿(1920和2400),不能拆开来打包 参考: 是参考vant插件:移动端Vant组件库rem适配下大小异常的解决方案:https://github.com/youzan/vant/issues/1181 说明: 因为 vue.config.js 文件无法获取window对象,所以任何外部参数都加不进来,甚至无法打印

    2024年02月14日
    浏览(44)
  • Vue3+Vite项目配置husky、stylelint、commitlint,实现git提交前代码校验

    做什么:本文将从零开始带你配置 husky 、 stylelint ,完成代码提交git前的强制校验,保证代码风格和一致性 技术栈:Vue3 + TypeScript + Vite 1.1 node.js v16.0.0 及以上 (我 v16.14.1) 1.2 pnpm v8.0.0 及以上(我 v8.6.6) 2.1 安装 pnpm 2.2 创建项目-不多赘述 3.1 安装 eslint 3.2 生成eslint配置文件

    2024年02月13日
    浏览(51)
  • 什么是postcss?如何使用postcss?

    postcss是一个JavaScript 工具,可以用来 转换 CSS 代码 。postcss可以使用不同插件实现自动添加 浏览器前缀,代码合并,代码压缩 等等效果。 安装: 运行指令: 后面添加 -w , 可以实时监听。 安装插件: 方式1:创建postcss.config.js文件,配置 方式2:使用“browserslist”键在 pack

    2024年02月16日
    浏览(40)
  • 实现Jenkins自动发包配置

    查找密码 添加自己的用户 选择“Install suggested plugins”安装默认的插件,下面Jenkins就会自己去下载相关的插件进行安装。 参考文章:使用docker-compose部署jenkins 遇到 jar运行报错no main manifest attribute 使用下面代码解决 错误代码如下 参考文章 https://blog.csdn.net/u012723183/article/det

    2024年02月13日
    浏览(30)
  • vue3+vite路由中使用element自动导入图标

    el-icon v-if=\\\"childItem.meta childItem.meta.icon\\\"          component :is=\\\"childItem.meta.icon\\\" / /el-icon import { createRouter, createWebHashHistory } from \\\'vue-router\\\' import Layout from \\\'../layout/index.vue\\\' import { markRaw } from \\\'vue\\\' export const asyncRoutes = [   {     path: \\\'/\\\',     name: \\\'HomePage\\\',     component: Layout,     redir

    2024年02月15日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包