reactjs - 如何确定我使用 webpack 和 customize-cra 构建的 create react 应用程序中 css 的顺序？

Question

我正在尝试更改如何使用 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> 之前动态加载？在我的构建中？

Answer 1

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

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

然后我放一个三元组来检查应用程序是否在本地运行而不会发生这种情况，或者它是否在发生这种情况的生产环境中运行。在这种情况下，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' }
    ],
  }),

这解决了问题。