CSS Module构建失败（来自./node_modules/mini-css-extract-plugin/dist/loader.js）：ReferenceError：document未定义

在本文中，我们将介绍CSS Module构建失败的问题，并探讨解决方案。

阅读更多：CSS 教程

什么是CSS Module？

在开始解决问题之前，我们先来了解一下什么是CSS Module。CSS Module是一种用于组织、封装和重用CSS代码的工具。它通过将样式限定在具体的组件范围内，避免样式的全局污染和冲突问题。通过使用CSS Module，我们可以在项目中轻松地维护和管理样式，并且可以减少命名冲突的可能性。

问题描述

当我们尝试使用CSS Module构建项目时，有时会遇到以下错误信息：

CSS Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js): ReferenceError: document is not defined

这个错误通常是由于在CSS Module中使用了JavaScript DOM对象（如document）而导致的。由于CSS文件是在构建过程中被独立解析和处理的，所以其中直接使用JavaScript DOM对象是不被允许的，因为在构建过程中没有可用的浏览器环境。

解决方案

要解决这个问题，我们可以尝试以下几种方法：

方法一：避免在CSS Module中使用JavaScript DOM对象

由于CSS Module是用于管理样式的工具，我们应该尽量避免在其中使用JavaScript DOM对象。如果我们确实需要在样式中使用某些动态效果，可以考虑将其转移到JavaScript文件中处理，然后通过CSS类与JavaScript进行关联。

例如，在使用CSS Module的React项目中，我们可以使用类似styled-components或emotion等工具，将样式和交互效果结合起来。

// 使用styled-components将样式与交互效果结合起来
import styled from 'styled-components';

const Wrapper = styled.div`
  /* CSS Module样式 */
`;

const Component = () => {
  return (
    <Wrapper>
      {/* JSX代码 */}
    </Wrapper>
  );
};

方法二：使用环境变量区分开发和生产环境

有时，我们在开发环境中需要使用JavaScript DOM对象，在生产环境中不需要。为了避免上述错误，在编译过程中可以通过环境变量来标记是否需要处理JavaScript DOM对象。

在Webpack配置文件中，可以定义一个全局环境变量，例如process.env.NODE_ENV，根据该变量的值来判断当前的环境。然后可以在CSS Module的配置中，根据环境变量来选择是否允许使用JavaScript DOM对象。

例如，在使用CSS Module的Webpack配置中：

// 根据环境变量决定是否允许使用JavaScript DOM对象
const enableDOM = process.env.NODE_ENV === 'development';

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                // 动态决定是否启用CSS Module
                localIdentName: enableDOM ? '[name]__[local]' : '[hash:base64]',
              },
            },
          },
        ],
      },
    ],
  },
  // ...
};

方法三：使用解析器插件

如果上述方法无法解决问题，可以尝试使用解析器插件来解决。例如，在使用CSS Module的Webpack配置中，可以添加@babel/standalone插件，将CSS代码转换为AST（抽象语法树），然后通过AST对代码进行处理。

以下是一个示例Webpack配置的代码片段：

const babelParser = require('@babel/parser');
const traverse = require('@babel/traverse').default;

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /.css$/,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              modules: {
                // 使用解析器插件处理CSS Module
                getLocalIdent: (context, localIdentName, localName, options) => {
                  const ast = babelParser.parse('');
                  const visitor = {
                    // 添加对其他JavaScript DOM对象的处理
                  };
                  traverse(ast, visitor);
                  // 返回处理后的类名
                  return ???;
                },
              },
            },
          },
        ],
      },
    ],
  },
  // ...
};

总结

CSS Module构建失败的问题通常是由于在CSS Module中使用了JavaScript DOM对象而导致的。为了解决这个问题，我们可以避免在CSS Module中使用JavaScript DOM对象，使用环境变量来区分开发和生产环境，或者通过解析器插件对CSS代码进行处理。选择适合项目的解决方案，可以有效避免这类问题的出现，提高代码质量和可维护性。

希望本文对你解决CSS Module构建失败的问题有所帮助！