如何最小化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/