webpack4系列教程,如何跳过postcss直接使用px2rem功能呢?在前面的文章里面,大家可以看到:苏南大叔是利用postcss使用px2rem的。那么为啥要跳过postcss呢?因为postcss里面的px2rem,和苏南大叔新实验的一个功能冲突了....

苏南大叔:webpack4系列教程,跳过postcss直接使用px2rem - webpack-px2rem-loader
webpack4系列教程,跳过postcss直接使用px2rem(图4-1)

本文测试环境:win10node@14.2.0npm@6.14.4webpack@4.43.0mini-css-extract-plugin@0.9.0css-loader@3.5.3url-loader@4.1.0less@3.11.1less-loader@6.1.0node-sass@4.14.1sass-loader@8.0.2postcss@7.0.30postcss-loader@3.0.0webpack-px2rem-loader@1.0.2

事情的起因

苏南大叔要使用scsslesssourcemap功能,然后发现sourcemappostcsspx2rem里面,被减少了信息。在浏览器里面查看的时候,.scss的内容,是px2rem替换过的内容,而不是原始的.scss内容。

所以,苏南大叔决定:把px2rem功能移动到webpack里面来,然后调整loader的加载顺序,让px2rem最后一个处理css文件。从而保留了较为完整的sourcemap信息。

安装webpack-px2rem-loader

npm i webpack-px2rem-loader -D

苏南大叔:webpack4系列教程,跳过postcss直接使用px2rem - px2rem-loader
webpack4系列教程,跳过postcss直接使用px2rem(图4-2)

配置项目

配置项目,主要需要配置cssscssless的项目,下面以scss的配置为例(cssless也是需要类似设置的哦):

注意:webpackloader的加载,是从后往前处理的,所以,webpack-px2rem-loader在配置代码中的顺序,要尽量靠前,也就是说loader的加载顺序里面要尽量靠后了。
{
    test: /\.scss$/,
    include: [path.resolve(__dirname, 'src')],   // 限制打包范围,提高打包速度
    exclude: /node_modules/,                     // 排除node_modules文件夹
    use: [
        {
            loader: MiniCssExtractPlugin.loader,
            options: {
                publicPath: '../',  //img图片路径
            },
        },
        {
            loader:'webpack-px2rem-loader',
            options:{
                basePx:100,
                floatWidth:2,
                min:1,
                
            }
        },
        "css-loader",
        "postcss-loader",
        "sass-loader",
    ]
},

苏南大叔:webpack4系列教程,跳过postcss直接使用px2rem - webpack-px2rem-config
webpack4系列教程,跳过postcss直接使用px2rem(图4-3)

注意:要移除在postcss.config.js里面,对px2rem的功能引用。

苏南大叔:webpack4系列教程,跳过postcss直接使用px2rem - postcss-no-px2rem
webpack4系列教程,跳过postcss直接使用px2rem(图4-4)

关键配置项目

{
    loader:'webpack-px2rem-loader',
    options:{
        basePx:100,
        floatWidth:2,
        min:1,
    }
},
  • basePx,这个就是多少像素等于1rem,一般都是设置为100
  • floatWidth,这个就是换算成rem之后,要保留几位小数。
  • min这个功能是新加的,因为很小的px(比如border的1px)转换为rem后在很小的设备上结果会小于1px,有的设备就会不显示。

相关链接

总结

反正这个px2rem也是个可有可无的项目,但如果是能够用得上,那定是极好的。更多webpack的故事,还是看看下面的链接吧~

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   webpack    px2rem

本站的忠实读者小伙伴,正在阅读下面这些文章: