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

您需要将最小化选项true赋予css-loader

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/

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

2 个答案: