如何在我的create react app build中使用webpack和customize-cra确定css的顺序？

rbl8hiat 于 2023-03-30 发布在 Webpack

关注(0)|答案(2)|浏览(140)

我正在尝试使用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>之前动态加载？

webpack

来源：https://stackoverflow.com/questions/61762214/how-to-determine-the-order-of-css-in-my-create-react-app-build-with-webpack-and

2条答案

按热度按时间

zyfwsgd61#

因此，当我在本地开发"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' }
    ],
  }),

这就解决了问题。

赞(0）回复(0）举报 2023-03-30

kse8i1jr2#

我用CRA创建了我的react应用程序，所以对我来说，它需要添加一个CRACO配置，该配置覆盖了MiniCssExtractPlugin的使用，MiniCssExtractPlugin的优化似乎导致了在生产构建期间css的加载顺序不一致

module.exports = {
  webpack: {
    configure: (webpackConfig, { env, paths }) => {
      // For whatever reason we can't find the loader MiniCssExtractPlugin.loader
      // but by looking up css-loader we can get access to the MiniCssExtractPlugin.loader and replace it with the one used in dev
      const { isFound, match: cssModuleRule } = getLoader(
        webpackConfig,
        loaderByName("css-loader"),
      );

      if (isFound) {
        cssModuleRule.parent.forEach((x) => {
          if (x.loader === MiniCssExtractPlugin.loader) {
            x.loader = require.resolve("style-loader");
          }
        });
      }
      return webpackConfig;
    },
  },
};

赞(0）回复(0）举报 2023-03-30

我来回答

如何在我的create react app build中使用webpack和customize-cra确定css的顺序？

2条答案

相关问题

热门标签

最新问答