欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

webpack 配置postCSS 自动添加css兼容前缀

程序员文章站 2022-03-07 21:45:31
不同浏览器对CSS的兼容性是不同的,之前想要做到css样式在各个浏览器都兼容需要在css代码中手动加上前缀,现在前端工程化即可实现自动添加前缀方法:webpack中配置postCSS 自动添加css兼容前缀步骤:1.安装 postcss-loader autoprefixer 依赖运行npm i postcss-loader autoprefixer -D 安装相关依赖npm i postcss-loader autoprefixer -D2.在项目根目录中创建postcss....

不同浏览器对CSS的兼容性是不同的,之前想要做到css样式在各个浏览器都兼容需要在css代码中手动加上前缀,现在前端工程化即可实现

自动添加前缀方法:

webpack中配置postCSS 自动添加css兼容前缀

步骤:

1.安装 postcss-loader autoprefixer 依赖

运行 npm i postcss-loader autoprefixer -D 安装相关依赖

npm i postcss-loader autoprefixer -D

2.在项目根目录中创建postcss 的配置文件 postcss.config.js,并初始化如下配置

const autoprefixer = require('autoprefixer');

module.exports = {
    plugins: [autoprefixer] // 挂载插件
}

3.在 webpack.config.js 的 module -> rules数组中,修改 css 的 loader规则:

rules: [
    {
        test: /\.css/,
        use: ['style-loader','css-loader','postcss-loader']
    }
]

重新运行项目,即可

本文地址:https://blog.csdn.net/RedaTao/article/details/109205506