Webpack 防止为某些带有 css 模块的文件发出 css

Question

我正在尝试以这样的方式配置 webpack，对于某些 .css 文件，它不会发出 css（不会向styles.css 添加任何内容），但会发出 locals(className在 js 中导入对象的样式映射）。在 css-loader 中，modules 选项始终处于启用状态（又名 CSS Modules）。例如：

在一些 .js 文件中：

import cssNoEmit from './styles.noemit.scss'
import cssEmit from './styles.scss'

styles.noemit.scss的内容：

.testNoEmit {
  background: orange;
}

styles.scss的内容：

.testEmit {
  background: blue;
}

我想要实现的是最终生成的 .css 仅包含 .testEmit 类。此外，cssNoEmit 和 cssEmit 都包含到生成的 .css

中相关类的映射

可能通过extract-text-plugin 解决这个问题，但我不是在寻找那个解决方案，因为这个插件已被弃用。

这是我尝试过的：

所有的尝试都有可复制的例子here

编辑：尝试 1（感谢@felixmosh）和 5 成功。

尝试 1（工作）。 css-loader 有一个选项onlyLocals。 css-loader documentation 中的描述非常模糊，但据我所知，它应该做的事情与我想要实现的完全一样。

  {
    test: /\.noemit\.scss$/,
    use: [
      //MiniCssExtractPlugin.loader, // after disabling this, it started to work
      {
        loader: 'css-loader',
        options: {
          modules: {
            mode: 'local',
            exportGlobals: true,
            localIdentName: '[path][name]__[local]--[hash:base64:5]',
            context: path.resolve(__dirname, 'src'),
            hashPrefix: '_',
          },
          importLoaders: 2,
          onlyLocals: true, // setting this to true causes transpilation to crash
        },
      },
      
      ...

    ],
  },

尝试 5（工作，不完美）。尝试使用 webpack 内置功能，SplitChunksPlugin。我尝试根据this、SplitChinksPlugin docs、this、this 为这个用例创建一个配置。

  ...

  optimization: {
    splitChunks: {
      cacheGroups: {
        groupUnusedStyles: {
          name: "unusedStyles",
          chunks: "all",

          test: /\.noemit\.scss$/,

          enforce: true
        },
      }
    }
  }

这种方法将不需要的 css 重定向到 unusedStyles.css

它有效，但有一个小但令人沮丧的缺点。除了unusedStyles.css，它还会生成unusedStyles.js，这必须包含在html中，否则应用程序将无法运行。

更具体地说，两个块都必须在 html 中：

  <script type="text/javascript" src="/app.bundle.js"></script>
  <script type="text/javascript" src="/unusedStyles.bundle.js"></script>

有谁知道如何让它工作而不需要添加另一个包？

尝试 2（不工作）。不要使用onlyLocals 设置并省略负责“css 输出”的加载程序（例如style-loader 或mini-extract-css-plugin）。这种情况下导入的css内容很奇怪

尝试 3（不起作用） null-loader 也不起作用，因为它只导入一个空对象

尝试 4（不工作）。 There 是另一个想法：

class ServerMiniCssExtractPlugin extends MiniCssExtractPlugin {
  getCssChunkObject(mainChunk) {
    return {};
  }
}

... // use ServerMiniCssExtractPlugin the same way as MiniCssExtractPlugin 

这个不行，因为final .css 有所有的样式，就好像用的是普通的MiniCssExtractPlugin

另外，there 是 github 上的一个相关线程。

Answer 1

您的第一次尝试是正确的，只需从 noemit.scss 加载程序列表中删除 MiniCssExtractPlugin.loader。

我已经在本地尝试过，它可以工作，输出的 css 只包含无“noemit”文件，但两者都有 css-modules 对象映射。

移除的加载器 (MiniCssExtractPlugin) 负责将 scss 包含在最终的 css 文件中。