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
        })
    ]
}
相关推荐
烛阴21 分钟前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子24 分钟前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead1 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
Xiaouuuuua2 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser2 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI2 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三2 小时前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三2 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹2 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三3 小时前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python