样式迷失与Webpack媒体-查询-插件

Question

我正在尝试根据媒体查询将CSS输出拆分成多个文件。我使用Webpack 4作为开发/构建工具来生成另一个系统使用的静态资源。问题是，当将MediaQueryPlugin添加到webpack.config.js (如下所示)时，dist.css最终只包含打印媒体查询，而不包含其他任何内容。我有一个dist-print.css和一个main-print.css (都保持为空)，控制台中没有错误。我一定遗漏了一些非常简单的东西！(注意scss文件是main.scss)有什么想法吗？

...
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const MediaQueryPlugin = require('media-query-plugin');
...

module.exports = (env, options) => ({
...
  module: {
    rules: [{
      test: /\.scss$/,
      use: [
        MiniCssExtractPlugin.loader,
        'css-loader',
        MediaQueryPlugin.loader,
        'postcss-loader',
        'sass-loader'
      ]
    },
    {
      test: /\.css$/,
      use: [MiniCssExtractPlugin.loader, 'css-loader']
    }],
    plugins: [
      new MiniCssExtractPlugin({
        filename: `css/dist.css`
      }),
      new MediaQueryPlugin({
        include: [
          'main'
        ],
        queries: {
          print: 'print',
        }
      }),
      new CleanWebpackPlugin(['assets'], {
        root: `${__dirname}/${pkg.build.dest_folder}`
      }),
    ],
  }
});

Answer 1

我遗漏的一件简单的事情是文件名中的关键变量。在此更改后，工作情况与预期一致

  new MiniCssExtractPlugin({
    filename: `css/[name].css`
  }),