如何最小化webpack到字符串加载器CSS？

Question

我正在使用此解决方案： https : //stackoverflow.com/a/45452306/417620 。 效果很好，但是返回的CSS内容带有注释，并且没有缩小。

module: [
    rules: [
      {
        test: /\.css$/,
        use: ['to-string-loader', 'css-loader']
      }
    ]
  }

我正在使用webpack4。我尝试使用许多不同的加载器，但是它们似乎不再与webpack 4一起使用，或者仅当CSS导出到文件时才起作用。 无论如何，有没有删除CSS注释并缩小返回的CSS的方法？

这是将CSS作为字符串返回的js。 import myCss from './myCss.css';

Answer 1

您需要为您的css-loader提供最小化选项true

module: [
    rules: [
        {
          test: /\.css$/,
          use: [
            {
              loader: "to-string-loader",
            },
            {
              loader: "css-loader",
              options: { minimize: true },
            },
          ],
       }
    ]
  }

to-string-loader将有助于将其转换为字符串。 缩小将由css-loader 。

希望能帮助到你。 如有任何疑问，请回复。

Answer 2

我能够使用postcss-loader解决此问题。

 module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          "to-string-loader",
          "postcss-loader",
        ],
      },
    ],
  },

参考 https://webpack.js.org/loaders/postcss-loader/