Jinjiang / px2rem-loader

Webpack loader for px2rem css file
204 stars 33 forks source link

后面跟less-loader,加上UglifyJsPlugin的一个bug #7

Closed DualWield closed 7 years ago

DualWield commented 7 years ago
var webpack = require('webpack');
module.exports = {
    module: {
        loaders: [
            { test: /\.less$/, loader: "css!px2rem?remUnit=64&remPrecision=8!less?compress&noJs" }
        ]
    },
    plugins: [new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        },
        comments: 'all'
    })
    ]
}

index.less:

/* this is file.less */
body {
    color: #fff;
    height: 200px; /*no*/
}

height的200px不应该转为rem的,但是还是被转成了px。

我试着去掉UglifyJsPlugin或者less-loader,就可以work....

Jinjiang commented 7 years ago

我这边暂时没有机会重现,会不会是 uglify 之后注释的格式不被识别了?你是否方便看一下 uglify 之后的中间码是什么样子的? 不方便的话我晚些时候自己试试看 谢谢

DualWield commented 7 years ago

@Jinjiang 不客气,请问如何查看uglify之后的中间码?

另外为了方便重现,我把我的demo文件传到云上,以供下载查看~

https://pan.baidu.com/s/1ge8OUOj

Jinjiang commented 7 years ago

有一种简单的方法是在 px2rem-loader/lib/px2rem-loader.js 里把 source 打印出来 这里的 less 文件经过转换之后已经变成了 body{transform:translate(0, 0);height:200px},应该是你加入了 uglify 插件之后,CSS 里的注释也被丢掉了,所以 /* no */ 的标识没有被发现。

DualWield commented 7 years ago

恩,但是生产环节打包需要用uglify啊。。。。我在uglify里面选项里面设置注释保留还是有这个问题。不知道有没有解决办法?

Jinjiang commented 7 years ago

想办法找个能压缩 js 的 loader 吧,放到 px2rem-loader 和 css-loader 之间,不要用 plugin

DualWield commented 7 years ago

好吧,有机会我试一试,这个issue先关了