如何确定使用webpack和customize-cra创建react应用时css的顺序？

Question

我想改变如何在开发过程中保持我的css的顺序和我在使用 创建React应用. 当我在开发模式下运行我的应用程序时，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>

现在我用的是 定制-克拉 来定制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-rewired start",

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

然后，我放了一个三元组来检查应用程序是否在本地运行时不会发生这种情况，或者是否在生产中发生这种情况。这个 style-loader 在编译之前加载了chunk.css文件。less 在这种情况下的代码，但它可能是 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' }
    ],
  }),

这样就解决了这个问题