react 使用postcss-pxtorem

Yehger

于 2024-06-27 13:05:12 发布

阅读量308

点赞数 2

分类专栏： react 文章标签： react.js postcss 前端

本文链接：https://blog.csdn.net/meis27461/article/details/140010824

版权

react 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、安装

npm i postcss postcss-loader postcss-pxtorem

二、webpack rules配置

{
    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文件

module.exports = {
    plugins: [
        require('postcss-pxtorem')({
            rootValue:16*2,
            propList: ['*'],
            exclude: /node_modules/i
        })
    ]
}