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
        })
    ]
}
相关推荐
天下无贼10 分钟前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
我是天龙_绍12 分钟前
🔹🔹🔹 vue 通信方式 eventBus
前端
一个不爱写代码的瘦子1 小时前
迭代器和生成器
前端·javascript
拳打南山敬老院1 小时前
漫谈 MCP 构建之概念篇
前端·后端·aigc
前端老鹰1 小时前
HTML <output> 标签:原生表单结果展示容器,自动关联输入值
前端·html
OpenTiny社区1 小时前
OpenTiny NEXT 内核新生:生成式UI × MCP,重塑前端交互新范式!
前端·开源·agent
耶耶耶1111 小时前
web服务代理用它,还不够吗?
前端
Liamhuo2 小时前
2.1.7 network-浏览器-前端浏览器数据存储
前端·浏览器
洋葱头_2 小时前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
前端小书生2 小时前
React 组件渲染
前端·react.js