vite配置postcss

最新推荐文章于 2024-08-07 10:15:00 发布

博丽七七

最新推荐文章于 2024-08-07 10:15:00 发布

阅读量1.7k

点赞数 1

文章标签： postcss javascript 前端

本文链接：https://blog.csdn.net/m0_53785610/article/details/137433356

版权

本文介绍了如何使用pnpm管理和安装postcss插件如pxtorem和autoprefixer，以及如何在vite.config.js中配置它们，以便在项目中实现px到rem的转换和自动添加浏览器前缀。

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

1.搭建项目

pnpm create vite

2.下载postcss

pnpm i postcss
pnpm i postcss-pxtorem 
pnpm i autoprefixer

也可以去官网找其他插件下载

3.配置vite.config.js

import postCssPxToRem from 'postcss-pxtorem'
import autoprefixer from 'autoprefixer'
 
export default () => {
    return {
        css: {
            postcss: { 
                plugins: [
                    postCssPxToRem({ // 自适应，px>rem转换
                        rootValue: 16, // 1rem的大小
                        propList: ['*'], // 需要转换的属性，这里选择全部都进行转换
                    }),
                    autoprefixer({ // 自动添加前缀
                        overrideBrowserslist: [
                            "Android 4.1",
                            "iOS 7.1",
                            "Chrome > 31",
                            "ff > 31",
                            "ie >= 8"
                        ],
                    })
                ]
            },
        }
    };
}