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

Question

我正在尝试更改如何在开发中保持 css 的相同顺序，就像我在使用Create React App为我的应用程序构建时所做的那样。 当我在开发模式下运行我的应用程序时，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-rewired start",

然后在我的customizer-cra config-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' } ], }),

这解决了这个问题。