Question

在此追踪器回购中：https://github.com/pconerly/libsass-spritesmith-webpack-tracer

这一行： https://github.com/pconerly/libsass-spritesmith-webpack-tracer/blob/master/webpack.config.js#L82

我正在加载.scss，并将它们提取为明文。我也想缩小它们 - 我该怎么做？ style-loader似乎没有选项。我应该使用其他插件，例如css-loader吗？

Answer 1

因此除非您明确禁用它，否则这将自动通过CSS加载程序。因为你问的问题我假设这意味着你有。如果您正在提取而不是缩小，UglifyJsPlugin将不会自动缩小CSS。

根据我的需要，我需要提取CSS，然后提供缩小版和非缩小版。所以我遇到了同样的问题，我可以将它缩小或缩小，但不能两者兼而有之。

我能够使用Webpack的optimize-css-assets插件来实现此功能。它允许您使用ExtractTextPlugin缩小您提取的CSS，并且可以设置类似于UglifyJsPlugin设置的RegEx规则。

默认情况下，此插件使用css-nano模块进行压缩，但您可以根据需要更换为首选模块。

这是一个基本配置：

plugins: [
  new ExtractTextPlugin('[name].css'),
  new webpack.optimize.UglifyJsPlugin({
    compress: { warnings: false },
    include: /\.min\.js$/
  }),
  new OptimizeCssAssetsPlugin({
    assetNameRegExp: /\.min\.css$/,
    cssProcessorOptions: { discardComments: { removeAll: true } }
  })
]

Answer 2

我建议看一下postcss和postcss-loader。这样一旦你完成它设置，你可以为CSS / SCSS做很多很酷的事情，而不必花费数天时间与webpack作斗争。

Answer 3

为UglifyJsPlugin添加条目对我有效。

plugins: [
    new ExtractTextPlugin("[name].css"),
    new webpack.optimize.UglifyJsPlugin({
        compressor: { warnings: false }
    })
]

从webpack的ExtractTextPlugin和style-loader中缩小css

3 个答案: