react 使用postcss-pxtorem

一、安装

c 复制代码
npm i postcss postcss-loader postcss-pxtorem

二、webpack rules配置

c 复制代码
{
    test: /\.jsx?$/,
    exclude:/node_modules/,
    use:{
        loader:'babel-loader',
        options: {
            babelrc: false,
            presets: [
                require.resolve('@babel/preset-react'),
                [require.resolve('@babel/preset-env'), 
                    {modules: false}]
            ],
            cacheDirectory: true
        }
    },
},
{
    test: /\.(png|jpe?g|gif|mp3)$/i,
    type: 'asset/resource'
},
{
    test: /\.css$/i,
    use: [MiniCssExtractPlugin.loader, "css-loader","postcss-loader"],
}

三、postcss-pxtorem配置

项目根目录下创建postcss.config.js文件

cs 复制代码
module.exports = {
    plugins: [
        require('postcss-pxtorem')({
            rootValue:16*2,
            propList: ['*'],
            exclude: /node_modules/i
        })
    ]
}
相关推荐
jojo是只猫17 分钟前
前端vue对接海康摄像头流程
前端·javascript·vue.js
10年前端老司机4 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程8 小时前
2025前端面试题
前端·面试
前端小趴菜0510 小时前
React - createPortal
前端·vue.js·react.js
晓131310 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo10 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴11 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_78912 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼12 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原12 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序