如何简单且优雅的使用 PostCSS -> CSS 补前缀功能

最新推荐文章于 2024-06-10 09:52:21 发布

悰零

最新推荐文章于 2024-06-10 09:52:21 发布

阅读量791

点赞数

分类专栏：前端 PostCSS 文章标签：前端 PostCSS

本文链接：https://blog.csdn.net/kalenE992/article/details/88665771

版权

本文介绍了如何简单且优雅地使用PostCSS结合autoprefixer来为CSS添加浏览器前缀。首先，通过npm初始化项目并创建package.json文件，避免插件名冲突。接着，安装postcss和autoprefixer依赖。在完成安装后，创建CSS文件并使用npx命令进行编译，将无前缀的CSS转换为带有浏览器前缀的样式。

摘要由CSDN通过智能技术生成

这里写自定义目录标题

简单且优雅的使用 PostCSS -> CSS 补前缀功能：
- 1、安装 `package.json`
- 2、安装工具 `PostCSS` 、`autoprefixer`

简单且优雅的使用 PostCSS -> CSS 补前缀功能：

1、安装 `package.json`

先安装 package.json记录安装所用的插件，以便在其他电脑也能快速搭建对应环境。

npm init

根据对应的提示填写内容后，得到一个 package.json 文件。

注意：

package.json 文件的 name 不能与所需的插件名一样，如果名字相同的话，会引起一下错误（例如我的package文件name改为postcss，然后安装postcss插件的时候会引起下面的错误）。

npm ERR! code ENOSELF
npm ERR! Refusing to install package with name "postcss" under a package
npm ERR! also called "postcss". Did you name your project the same
npm ERR! as the dependency you're installing?
npm ERR!
npm ERR! For more information, see:
npm ERR!     <https://docs.npmjs.com/cli/install#limitations-of-npms-install-algo