如何在我的使用 webpack 和 custom-cra 创建反应应用程序构建中确定 css 的顺序？答案

【问题标题】：How to determine the order of css in my create react app build with webpack and customize-cra?如何在我的使用 webpack 和 custom-cra 创建反应应用程序构建中确定 css 的顺序？
【发布时间】：2020-08-28 21:54:59
【问题描述】：

我正在尝试使用 Create React App 更改如何在开发中保持我的 css 顺序与我在构建应用程序时的顺序相同。当我在开发模式下运行我的应用程序时，css 加载如下：

<style>custom injected css 1</style>
<style>custom injected css 2</style>
<style>css that is a part of the chunk.css</style>

但我的构建看起来像这样

<style>css that is a part of the chunk.css</style>
<style>custom injected css 1</style>
<style>custom injected css 2</style>

现在我正在使用 customize-cra 自定义 Create React App，这是 config-overrides.js 文件的样子

const _ = require("lodash");
const path = require("path");
const {
  override,
  addDecoratorsLegacy,
  disableEsLint,
  addWebpackModuleRule,
  addWebpackAlias,
  useBabelRc,
} = require("customize-cra");

function addCustomLessModule(config, env) {
  const fileLoaderCustomExtension = /\.(jpe?g|gif|bmp|mp3|mp4|ogg|wav|eot|ttf|woff|woff2)$/;
  const configExtension = /\.(config|overrides|variables)$/;
  const fileLoader = _.find(
    config.module.rules[2].oneOf,
    (rule) => rule.loader && rule.loader.indexOf("file-loader") !== -1
  );
  const customFileLoader = _.cloneDeep(fileLoader);
  customFileLoader.test = fileLoaderCustomExtension;
  customFileLoader.use = ["file-loader"];
  delete customFileLoader.loader;
  delete customFileLoader.options;
  fileLoader.exclude = (fileLoader.exclude || []).concat([
    fileLoaderCustomExtension,
    configExtension,
  ]);
  config.module.rules[2].oneOf.push(customFileLoader);
  const lessExtension = /\.less$/;
  const lessLoaders = [{
      loader: "style-loader"
    },
    {
      loader: "css-loader"
    },
    {
      loader: "less-loader"
    },
  ];
  config.module.rules[2].oneOf.push({
    test: lessExtension,
    use: lessLoaders,
  });

  return config;
}

module.exports = override(
  addCustomLessModule,
  addDecoratorsLegacy(),
  addWebpackModuleRule({
    test: /\.less$/,
    use: [{
        loader: "style-loader"
      },
      {
        loader: "css-loader"
      },
      {
        loader: "less-loader"
      },
    ],
  }),
  addWebpackAlias({
    ["../../theme.config$"]: path.join(__dirname, "./src/styles/theme.config"),
  }),
  addWebpackAlias({
    ["../semantic-ui/site"]: path.join(__dirname, "./src/styles/site"),
  }),
  // disableEsLint(),
  useBabelRc()
);

文件["../../theme.config$"]: path.join(__dirname, "./src/styles/theme.config"), 和["../semantic-ui/site"]: path.join(__dirname, "./src/styles/site") 是<style>custom injected css 1</style> 和<style>custom injected css 2</style>

如何使它们在我的构建中的<style>css that is a part of the chunk.css</style> 之前动态加载？

【问题讨论】：

标签： reactjs webpack less es6-module-loader

【解决方案1】：

所以当我进行本地开发"start": "NODE_ENV=Local react-app-rewired start",时，首先我必须在我的package.json 文件中为我的启动脚本设置一个环境变量@

然后在我的customizer-craconfig-overrides.js我设置我的节点环境变量const isLocal = process.env.NODE_ENV === 'Local'; 然后我从 webpack const MiniCssExtractPlugin = require('mini-css-extract-plugin'); 导入了 MiniCssExtractPlugin 插件

然后我放了一个三元组来检查应用程序是否在本地运行，而这不会发生，或者它是否在生产中发生。在这种情况下，style-loader 在编译的less 代码之前加载了chunk.css 文件，但它也可能是sass。所以我从这里更改代码：

addWebpackModuleRule({
    test: /\.less$/,
    use: [
      { loader: 'style-loader'},
      { loader: 'css-loader' },
      { loader: 'less-loader' }
    ],
  }),

到这里：

addWebpackModuleRule({
    test: /\.less$/,
    use: [
      { loader: isLocal ? 'style-loader' : MiniCssExtractPlugin.loader },
      { loader: 'css-loader' },
      { loader: 'less-loader' }
    ],
  }),

这解决了这个问题。

【讨论】：