Vue-cli4.x中配置Autoprefixer

最新推荐文章于 2024-07-25 00:54:09 发布
原创 最新推荐文章于 2024-07-25 00:54:09 发布 · 1.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #postcss

本文介绍了如何在VueCLI项目中修改.postcssrc.js和.browserslistrc文件来配置PostCSS的autoprefixer插件，以自动添加浏览器前缀。通过将.browserslistrc设置为'last 20 versions'进行测试，确保样式兼容性。修改后需重启项目才能看到效果。

Vue CLI 内部使用了 PostCSS
所以只需要修改.postcssrc.js和.browserslistrc文件即可，没有的话新建文件
在这里插入图片描述
.postcssrc.js

module.exports = {
  plugins: {
    "autoprefixer": {}
  }
};

.browserslistrc

> 1%
last 2 versions
not dead

测试的时候可以把.browserslistrc改成最后20个版本，否则可能看不到效果，
修改后需要重启

> 1%
last 20 versions
not dead

效果如下图，flex自动加了前缀
在这里插入图片描述

vue-cli2.x 3.x 实现完美的移动端适配【完美还原设计图UI的方法】
cometang--唐家世少
05-07 1422
需求：自己经常会做移动端开发相关的项目，用了非常多的适配移动端的方法，其中包括有：最原始的百分比流式布局；类似bootstrap/element的栅格布局；css3的媒体查询（@media）+rem单位;利用js监听设备宽度动态实现加载不同的css文件；淘宝的flexible.js(不得不说淘宝的解决方案不错，但已经被淘宝弃用了)，现在最为流行的适配方案就是今天重点说的方法：通过vue脚手架的po...
安装pocss插件autoprefixer
chencaw的专栏
02-17 790
安装pocss插件autoprefixer npm install --save-dev autoprefixer
关于在vue-cli中使用autoprefixer问题
weixin_34318272的博客
03-11 4995
作为前端开发css的兼容问题是不可避免的，下面我将介绍在vue-cli中如何使css在编译的时候自动添加厂商前缀。首先我们在初始化的vue-cli根目录下找到.postcssrc.js 文件。 在这里我们可以看到关于autoprefixer的配置是在package.json下的browserslist选项 通过在browserslist中配置autoprefixer兼容要求，通过npm run...
vue-cli3使用autoprefixer自动添加浏览器前缀
rayshaan0123的博客
08-14 1331
01.下载包 npm i postcss-loader autoprefixer@8.0.0 -D autoprefixer基于postcss，所有也要下载 postcss，注意指定版本号不要太高 02.项目根目录下创建postcss.config.js //postcss.config.js内容 module.exports = { plugins: { autoprefixer: {} } } 03.配置package.json的browserslist //根据需要来配置
vue-cli3.0配置autoprefixer+postcss-plugin-px2rem（从创建开始）
qq_38935512的博客
12-28 2553
前端开发中，为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀，这些属性多且难记。这里配置autoprefixer css后处理器自动兼容 看下效果 先单独配置autoprefixer CSS，less,sass都有用 1.vue create XXX 项目 这个就不多说了 2.安装相关依赖 npm install -D css-loader style-loader npm install -D postcss-loader autoprefixer postcss(这个我装的时候失败了，之后
vue cli4 浏览器前缀 自动补全
唐僧的专栏
05-06 689
最近做一个 电脑端的 网页； 需要兼容浏览器； 不同浏览器 有不同的前缀；想想头都大！ 还有脚手架为我们提供了 postcss-loader 和 autoprefixer npm install postcss-loader autoprefixer --save-dev 项目使用 vue cli4 创建的；网上教程都是在 webpack.config.js 中进行配置！ 然而我却找不到 webpack.config.js 文件.... 插件安装完毕之后 会有 browse...
Vue PostCss插件——autoprefixer，自动补全css浏览器前缀
qq_38210427的博客
04-25 2099
Autoprefixer是一款基于PostCSS插件，用于解析CSS并使用Can I Use中的值向CSS规则添加供应商前缀。它是 Google 推荐的，并在Twitter和阿里巴巴中使用。可以实现css3代码自动补全，也可以运用到sass、less中前端开发中，为兼容所有浏览器，部分CSS属性需要加上不同的浏览器前缀，这些属性多且难记。当然，我们可以手动添加，这样会使开发变得枯燥无味，且容易出错、遗漏，可能会增加不必要的调试。这样既浪费时间，又在无形中给自己添加了很多没必要的工作量。
vue-cli4.x创建企业级项目的方法步骤
10-15
本篇文章将详细介绍如何使用 Vue CLI 4.x 创建一个企业级项目，并涵盖关键步骤和配置。 首先，确保你已经安装了 Node.js，因为 Vue CLI 是基于 Node.js 的。然后，你需要全局安装 Vue CLI： ```bash $ npm install...
vue-cli 3.x中项目结构及文件组织
Vue CLI 3.x 的核心特点包括零配置快速原型开发、基于插件的可扩展特性、项目内部配置的即时即用、针对生产环境的优化打包等。 ## 1.2 Vue CLI 3.x 相对于 2.x 的变化 与 Vue CLI 2.x 相比，Vue CLI 3.x 在性能、...
使用vue cli4.x搭建vue项目的过程详解
10-15
读者通过阅读本文，可以了解升级到Vue CLI 4.x的动机，以及在搭建新Vue项目的过程中，如何进行项目创建、配置选择和功能模块的整合。 首先，升级到Vue CLI 4.x的原因可能包括了对旧版本bug的修复，新特性或更好的...
Autoprefixer介绍及在Vue中应用
qq_27474555的博客
09-08 4159
1、介绍 Autoprefixer是一款自动管理浏览器前缀的插件，可以解析css文件并且添加前缀到css内容里，使用Can I Use(caniuse网站)的数据决定哪些前缀是需要的。该插件css解析器采用postcss，使用Browserslist库，可以对浏览器的版本做精确设置。 2、工具特点 （1）、写纯净的css，不必学习特殊语言（如Sass），也不必记住其使用环境； （2）、与最新的规则...
vue使用 postcss-loader和autoprefixer插件
qq_30340185的博客
10-31 3563
 使用postcss-loader和autoprefixer插件，可以自动处理样式，给样式加上兼容前缀 1.npm i postcss-loader autoprefixer -D 2.新建postcss.config.js和.babelrc postcss.config.js const autoprefixer = require('autoprefixer') module.ex...
Vue3项目中：autoprefixer和postcss-pxtorem的组合使用
陨落的轨迹的博客
01-12 2373
autoprefixer是自动补全css3前缀的库 postcss-pxtorem是将px换算为rem的库 此次主要针对PC端 项目环境： vue-cli4 vue3 less 安装依赖 yarn add -D postcss yarn add -D postcss-pxtorem yarn add -D autoprefixer 项目根目录下新建postcss.config.js 文件 module.exports ...
vue-cli4的使用与配置
xiao1215fei的专栏
09-15 1367
关于旧版本 Vue CLI 的包名称由vue-cli改成了@vue/cli。 如果你已经全局安装了旧版本的vue-cli(1.x 或 2.x)，你需要先通过npm uninstall vue-cli -g或yarn global remove vue-cli卸载它。 Node 版本要求 Vue CLI 4.x 需要Node.jsv8.9 或更高版本 (推荐 v10 以上)。你可以使用n，nvm或nvm-windows在同一台电脑中管理多个 Node 版本。 由于 Nod...
Vue PostCss插件——autoprefixer配置完成后无效，已解决
热门推荐
足各路
06-25 1万+
在配置autoprefixer时，按照之前的配置可以成功补全css浏览器前缀，但是结合postcss-pxtorem插件，px可以成功转换为rem，但css前缀无效。 经过几个小时的鼓捣，终于让我发现了蛛丝马迹。哈哈哈，很开心，好激动！！ 一起来看一看博主陷入的困境吧。 1. autoprefixer的配置 根目录postcss.config.js文件中，配置代码如下： module.exports = { plugins: { 'autoprefixer': { overrid.
vue-cli3使用autoprefixer(在本地运行和打包时)自动添加浏览器前缀
ahq2018的博客
06-10 893
vue-cli3中autoprefixer的可能配置
Vue2 Web 开发项目（四）
龙哥盟
07-25 797
我们可以使用rules对象更改启用的规则以及修改它们的选项。rules: {},第一行禁用了规则，在使用...解构运算符时会出现 bug。第二行将规则更改为强制在所有数组和对象行的末尾放置逗号。规则有一个状态，可以取这三个值–'off'（或0），'warn'（或1），和'error'（或2在这一章中，我们通过学习如何使用 PostCSS 自动添加 CSS 前缀，使用 ESLint 对代码进行质量检查，以及使用 Jest 对组件进行单元测试，改进了我们的开发工作流程。我们甚至进一步添加了。
06. Vue脚手架(Vue-CLI)：前期领域-webpack安装、配置&相关概念 、 postcss
HGJyujian的博客
10-11 798
vue前情提示，webpack的相关内容
怎么在vunpm install -D css-loader npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: iscp-app-erm-ui@0.1.0 npm ERR! Found: css-loader@3.6.0 npm ERR! node_modules/css-loader npm ERR! css-loader@"^3.5.3" from @vue/cli-service@4.5.5 npm ERR! node_modules/@vue/cli-service npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @aurora/vue-cli-plugin-aurora-eslint@1.0.12 npm ERR! node_modules/@aurora/vue-cli-plugin-aurora-eslint npm ERR! dev @aurora/vue-cli-plugin-aurora-eslint@"latest" from the root project npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @vue/cli-plugin-babel@4.5.5 npm ERR! node_modules/@vue/cli-plugin-babel npm ERR! dev @vue/cli-plugin-babel@"^4.5.0" from the root project npm ERR! 5 more (@vue/cli-plugin-eslint, @vue/cli-plugin-router, ...) npm ERR! peer css-loader@"*" from vue-loader@15.11.1 npm ERR! node_modules/vue-loader npm ERR! vue-loader@"^15.9.2" from @vue/cli-service@4.5.5 npm ERR! node_modules/@vue/cli-service npm ERR! peer @vue/cli-service@"^3.0.0 || ^4.0.0-0" from @aurora/vue-cli-plugin-aurora-eslint@1.0.12 npm ERR! node_modules/@aurora/vue-cli-plugin-aurora-eslint npm ERR! dev @aurora/vue-cli-plugin-aurora-eslint@"latest" from the root project npm ERR! 6 more (@vue/cli-plugin-babel, @vue/cli-plugin-eslint, ...) npm ERR! 1 more (the root project) npm ERR! npm ERR! Could not resolve dependency: npm ERR! dev css-loader@"*" from the root project npm ERR! npm ERR! Conflicting peer dependency: webpack@5.99.9 npm ERR! node_modules/webpack npm ERR! peer webpack@"^5.0.0" from css-loader@6.9.1 npm ERR! node_modules/css-loader npm ERR! dev css-loader@"*" from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See C:\Users\lwx1453525\AppData\Local\npm-cache\eresolve-report.txt for a full report. 报错e.config.js中配置，需要安装那些依赖
最新发布
09-11
你遇到的错误是由于 **npm 8+ 默认启用了严格的依赖解析策略（`--strict-peer-deps`）**，当项目中已有 `css-loader@3.6.0` 而你想安装一个更高版本（如 `css-loader@^6.x`），npm 会因为依赖冲突而拒绝安装。 --- ### ✅ 问题核心 - 当前你的项目依赖了 Vue CLI 的某些插件或服务，它们依赖于较旧版本的 `css-loader`（例如 `^3.5.3`）。 - 你尝试手动安装 `css-loader` 的最新版本时，npm 检测到版本不兼容，导致报错。 --- ### ✅ 解决方案一：使用 `--legacy-peer-deps` 你可以通过添加 `--legacy-peer-deps` 参数来忽略 peer dependency 冲突： ```bash npm install -D css-loader --legacy-peer-deps ``` 这将强制使用 npm 7 及之前版本的依赖解决方式，跳过对 peer dependencies 的严格检查。 --- ### ✅ 解决方案二：使用 `--force` 如果你确定可以覆盖当前已安装的依赖： ```bash npm install -D css-loader --force ``` > ⚠️ 注意：这个选项可能会破坏现有依赖关系，请谨慎使用。 --- ### ✅ 解决方案三：升级整个项目依赖 如果项目允许，建议升级整个项目到支持新版本 `css-loader` 和 `webpack@5` 的环境。Vue CLI 4.5.5 是基于 Webpack 4 的，你需要升级到 Vue CLI 5+ 才能完全兼容 Webpack 5 和最新 loader 版本。 1. 升级 Vue CLI： ```bash npm install -g @vue/cli vue upgrade ``` 2. 更新依赖项版本后重新安装： ```bash npm install -D css-loader less less-loader postcss-loader vue-style-loader ``` --- ### ✅ 推荐安装的依赖列表 确保以下依赖已正确安装： ```bash npm install -D css-loader less less-loader postcss-loader vue-style-loader autoprefixer ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值