webpack 中 postcss-px2rem 生产环境中注释失效

[gaofant101]

@ 问题

webapp 使用 flexible.js 配合 postcss 插件做的适配;在开发环境下页面正常显示,但是到生产环境下postcss-px2rem /*px*/ /*no*/ 注释没有起作用;

环境

• window
• webpack: 3.5.5
• postcss-loader: 2.0.8
• postcss-px2rem: 0.3.0
• node-sass: 4.7.2

配置

...
test: /\.scss$/,
use: [
    'style-loader',
    'css-loader',
    'postcss-loader',
    'sass-loader',
],
...

样式结果

/* 实际样式 */
h1 {
    font-size: .4rem;
}

/* 预期样式 */
[data-dpr="1"] h1 {
    font-size: 15px;
}

[data-dpr="2"] h1 {
    font-size: 30px;
}

[data-dpr="3"] h1 {
    font-size: 45px;
}

@ 查找解决办法

起初,以为是 webpack 中的 UglifyJSPlugin 压缩的时候把注释代码全都去掉了,才引起了 postcss-px2rem /*px*/ /*no*/ 等注释不起作用;
但是深入查找答案过后,其实并不是 UglifyJSPlugin 在做怪,在 sass-loader选项里配置 outputStyle: 'expanded', 是可以解决 /*px*/ /*no*/ 注释失效的问题;
修改配置如下:

...
test: /\.scss$/,
use: [
    'style-loader',
    'css-loader',
    'postcss-loader',
-    'sass-loader',
+    {
+        loader: 'sass-loader',
+        options: {
+            outputStyle: 'expanded',
+        },
+    },
],
...

@ 深入查找原因

实际的解决办法,不是自己想象 UglifyJSPlugin 压缩引起的原因(假想不去验证,思想太危险);
必须得查清楚问题根源;

sass-loader

sass-loader 的配置项里添加配置解决了注释失效问题;
sass-loader github上去查看官方文档;
整片文档看下来并没有 outputStyle 这个配置项,这就奇怪了,难道是黑魔法?
翻阅 issue 查找 outputStyle 关键字有很多 closed issue 这个配置项肯定是存在的;
查看源码! sass-loader/lib/normalizeOptions.js 中找到了选项

// opt.outputStyle
if (!options.outputStyle && loaderContext.minimize) {
    options.outputStyle = "compressed"; // 压缩
}

找到根源了,如果没有配置项,就执行压缩;

node-sass

在 sass-loader 中没有 outputStyle: 'expanded', 配置项,想到 sass-loader 又是基于 node-sass 的;
github 上 node-sass 的文档中

outputStyle

Type: String
Default: nested
Values: nested, expanded, compact, compressed
Determines the output format of the final CSS style.

最终找到根源, outputStyle: 'expanded', 设置 sass-loader 解析过后 css 文件是可拓展的;

@ 参考

webpack-contrib sass-loader

node-sass

px2rem issues#2

sass-loader issues#299

resolve-url-loader issues#57

[V-Tom]

同样在 less-loader 我也遇到了这个问题：

以下我自己找到的解决方案，我没有在文档当中找到，如果你发现文档当中写了，请告知我，谢谢

依赖文件如下：

    "less": "^3.0.1",
    "less-loader": "^4.1.0",
    "mini-css-extract-plugin": "^0.4.0",
    "postcss-loader": "^2.1.4",
    "postcss-px2rem": "^0.3.0",
    "webpack": "^4.5.0",
    "webpack-cli": "^2.0.14",

然后根据 less-loader 的源码文件对于 compress 处理发现默认 compress 为 true，见下源码代码关键部分摘抄以及截图打印出的 loaderContext：

 const options = {
    plugins: [],
    relativeUrls: true,
    // 关键在这里：compress
   // loaderContext 下图打印的有
    compress: Boolean(loaderContext.minimize),
    ...clone(loaderUtils.getOptions(loaderContext)),
  };

所以需要在 webpack 配置文件当中设置 less loader 大致为下面：

 {
            loader: 'less-loader',
            options: {
              outputStyle: 'expanded',
              compress: false
            },
          }

更改完毕后再次打包生产环境，注释生效，暂时没有发现其他的后遗症。

[ZhaoTim]

@ 问题

webapp 使用 flexible.js 配合 postcss 插件做的适配;在开发环境下页面正常显示,但是到生产环境下postcss-px2rem /*px*/ /*no*/ 注释没有起作用;

环境

• window
• webpack: 3.5.5
• postcss-loader: 2.0.8
• postcss-px2rem: 0.3.0
• node-sass: 4.7.2

配置

...
test: /\.scss$/,
use: [
    'style-loader',
    'css-loader',
    'postcss-loader',
    'sass-loader',
],
...

样式结果

/* 实际样式 */
h1 {
    font-size: .4rem;
}

/* 预期样式 */
[data-dpr="1"] h1 {
    font-size: 15px;
}

[data-dpr="2"] h1 {
    font-size: 30px;
}

[data-dpr="3"] h1 {
    font-size: 45px;
}

@ 查找解决办法

起初,以为是 webpack 中的 UglifyJSPlugin 压缩的时候把注释代码全都去掉了,才引起了 postcss-px2rem /*px*/ /*no*/ 等注释不起作用;
但是深入查找答案过后,其实并不是 UglifyJSPlugin 在做怪,在 sass-loader选项里配置 outputStyle: 'expanded', 是可以解决 /*px*/ /*no*/ 注释失效的问题;
修改配置如下:

...
test: /\.scss$/,
use: [
    'style-loader',
    'css-loader',
    'postcss-loader',
-    'sass-loader',
+    {
+        loader: 'sass-loader',
+        options: {
+            outputStyle: 'expanded',
+        },
+    },
],
...

@ 深入查找原因

实际的解决办法,不是自己想象 UglifyJSPlugin 压缩引起的原因(假想不去验证,思想太危险);
必须得查清楚问题根源;

sass-loader

sass-loader 的配置项里添加配置解决了注释失效问题;
sass-loader github上去查看官方文档;
整片文档看下来并没有 outputStyle 这个配置项,这就奇怪了,难道是黑魔法?
翻阅 issue 查找 outputStyle 关键字有很多 closed issue 这个配置项肯定是存在的;
查看源码! sass-loader/lib/normalizeOptions.js 中找到了选项

// opt.outputStyle
if (!options.outputStyle && loaderContext.minimize) {
    options.outputStyle = "compressed"; // 压缩
}

找到根源了,如果没有配置项,就执行压缩;

node-sass

在 sass-loader 中没有 outputStyle: 'expanded', 配置项,想到 sass-loader 又是基于 node-sass 的;
github 上 node-sass 的文档中

outputStyle

Type: String
Default: nested
Values: nested, expanded, compact, compressed
Determines the output format of the final CSS style.

最终找到根源, outputStyle: 'expanded', 设置 sass-loader 解析过后 css 文件是可拓展的;

@ 参考

webpack-contrib sass-loader

node-sass

px2rem issues#2

sass-loader issues#299

resolve-url-loader issues#57

这样设置以后，打包以后的样式文件没有被压缩，应该会导致样式文件的体积变大吧？这个如何解决呢？