webpack压缩时候会把css的注释先去除，然后在loader，导致带注释的编译无效

songsiqi / px2rem

According to one stylesheet, generate rem version and @1x, @2x and @3x stylesheet.

558 stars 92 forks source link

webpack压缩时候会把css的注释先去除，然后在loader，导致带注释的编译无效 #2

Open younth opened 8 years ago

younth commented 8 years ago

未优化压缩前，是可以的。上线时候执行webpack.optimize 发现编译后的css文件，border:1px solid red 这样的都是编译成了rem，写的时候是用/px/的，请问要怎么整

songsiqi commented 8 years ago

@younth 能给个具体的demo么？

younth commented 8 years ago

是这样的：

            {
                test: /\.less$/,
                include: srcDir,
                loader: ExtractTextPlugin.extract("style", 'css!px2rem?remUnit=75&remPrecision=8!less')
            },

        new webpack.optimize.OccurenceOrderPlugin(),
        // Webpack 提供了设置环境变量来优化代码
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        }),
        // new WebpackMd5Hash(),
        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                warnings: false
            }
        }),
        new webpack.optimize.DedupePlugin()

配置大概是这样的，现在执行build时候，发现所有的/**/注释都没了，感觉应该是注释先被去除了，然后在进行了loader

younth commented 8 years ago

border:1px solid red;/*no*/

类似这样的，还是被直接转为rem了

songsiqi commented 8 years ago

@younth 能给一份完整的webpack.config.js么？

AnyGong commented 8 years ago

@songsiqi +1 我今天也遇到这个情况了

songsiqi commented 8 years ago

@younth @AnyGong 已给webpack提issue： https://github.com/webpack/webpack/issues/2136

AnyGong commented 8 years ago

@songsiqi 看了一下webpack 的 issue，搞不好会被淹没掉，你们group有没人可以帮忙解决一下，十分感谢了~

songsiqi commented 8 years ago

@AnyGong 这个只能等webpack去解决了，我们目前也没有用webpack去压缩css

quanru commented 8 years ago

使用Px替代注释方案怎么样 // px is converted to rem .convert { font-size: 16px; // converted to 1rem }

// Px or PX is ignored by postcss-pxtorem but still accepted by browsers .ignore { border: 1Px solid; // ignored border-width: 2PX; // ignored }

Rookiewan commented 8 years ago

+1 有解吗现在

gaofant101 commented 8 years ago

'upgrade' 自行解决, 希望对各位有帮助. webpack 中 postcss-px2rem 生产环境中注释失效 #15

FMMLMF commented 8 years ago

mark,使用less遇到同样的问题，不过sass有解决方法。

sandwich99 commented 8 years ago

@FMMLMF 求 sass 解解决方法

webpack2 貌似会修复该问题

see http://webpack.github.io/docs/roadmap.html

the uglifyjs plugin no longer minimize other assets

FMMLMF commented 8 years ago

@sandwich99 sass: generateLoaders(['css?-autoprefixer', 'sass?indentedSyntax']), scss: generateLoaders(['css?-autoprefixer', 'sass?outputStyle=expanded']) 这个就ok了

coder-Yin commented 7 years ago

{ test: /.css\?p6$/, loader: ExtractTextPlugin.extract([ "css?modules&importLoaders=1&localIdentName=[hash:base64:8]", "postcss", 'px2rem?remUnit=37.5', "sass?outputStyle=compact", ]) }