create-react-app构建后CSS缺失，外部@import未加载问题咨询

1. 外部@import是否是导致CSS缺失的原因？ #

是的，这个外部@import语句就是问题的根源。

浏览器处理CSS中的@import有严格规则：如果@import出现在CSS文件的非起始位置，或者被嵌套在@media等规则内部，浏览器会直接忽略这条导入指令。你看到网络面板无请求记录、替换为无效URL也没有404，正是因为浏览器根本没执行这条@import。

开发环境运行正常，是因为dev服务器的CSS处理逻辑和生产构建后的压缩合并逻辑不同——开发时@import的位置符合浏览器要求，但构建后CSS被压缩合并，@import被移到了文件中间，导致失效。

2. 如何强制构建脚本将该CSS包含到构建包中？ #

推荐以下几种解决方案：

方法一：直接本地导入Esri CSS #

放弃外部@import，直接从@arcgis/core包引入本地CSS文件。在项目入口文件（如src/index.js或src/App.js）中添加：

import '@arcgis/core/assets/esri/themes/light/main.css';

Webpack构建时会自动将该CSS打包到最终的main.css中，不会生成外部@import。

方法二：修改Calcite Components样式导入方式 #

如果样式是通过Calcite Components引入的，直接导入本地Calcite CSS：

import '@esri/calcite-components/dist/calcite/calcite.css';

同时确保Calcite Components的初始化代码无需依赖外部@import。

方法三：用CRACO修改Webpack配置（无需eject） #

如果必须保留原有导入方式，可通过CRACO覆盖create-react-app的Webpack配置，让它处理外部@import并打包到本地：

1. 安装CRACO：

npm install @craco/craco --save-dev

2. 在项目根目录创建craco.config.js，添加配置：

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  webpack: {
    configure: (webpackConfig) => {
      const cssRule = webpackConfig.module.rules.find(rule => rule.oneOf);
      cssRule.oneOf.forEach(loader => {
        if (loader.test && loader.test.toString().includes('css')) {
          loader.use.forEach(use => {
            if (use.loader === MiniCssExtractPlugin.loader) {
              use.options = {
                ...use.options,
                publicPath: '../',
              };
            } else if (use.loader === 'css-loader') {
              use.options = {
                ...use.options,
                importLoaders: 1,
                url: (url) => {
                  // 允许处理Esri的CSS资源URL
                  if (url.startsWith('https://js.arcgis.com/4.25/@arcgis/core/assets/')) {
                    return false;
                  }
                  return true;
                }
              };
            }
          });
        }
      });
      return webpackConfig;
    }
  }
};

3. 修改package.json中的scripts：

"scripts": {
  "start": "craco start",
  "build": "craco build",
  "test": "craco test",
  "eject": "react-scripts eject"
}

构建时Webpack会自动下载外部CSS并打包到本地文件中。

内容的提问来源于stack exchange，提问作者Michael