Question

我正在尝试配置craco以使CSS模块与LESS以及antd一起使用。 craco与react-app-rewired类似，它允许修改create-react-app而不会弹出。

为此，我使用craco-antd插件。仅导入所需的antd样式并让LESS起作用就已经做了必要的工作。

到目前为止，我可以使用antd的样式，也可以使用CSS模块，但是不能同时使用这两种样式。

要使antd的样式生效，我必须注释掉cssLoaderOptions...（请参见下面的代码），但是CSS模块不再起作用。无论哪种情况，都不会出错。

如果我离开cssLoaderOptions，CSS模块可以工作，但是antd似乎失去了一些样式。例如，单击button时仍然可以看到一些动画，但是颜色样式和形状都消失了。

如果可以帮助更快地调试，我可以链接到一个仓库。

一旦准备就绪，我将为希望使用它的任何人发布此仓库。

const CracoAntDesignPlugin = require("craco-antd");
const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
const WebpackBar = require("webpackbar");

// Don't open the browser during development
process.env.BROWSER = "none";

module.exports = {  
  plugins: [
    {
      plugin: CracoAntDesignPlugin,

      options: {
        modifyLessRule: function(lessRule, _context) {       
          lessRule.test = /\.less$/;
          lessRule.exclude = undefined; // makes sure we don't exclude any LESS file.          

          return lessRule;
        },       

        // CSS Modules. This makes the styling of antd to stop working. If I comment out, antd's styling works, but of course CSS Modules don't
        cssLoaderOptions: {
          modules: true,
          localIdentName: `${
            process.env.NODE_ENV === "production"
              ? "[local]_[hash:base64:5]"
              : "[path][name]__[local]-"
          }-[hash:base64:8]`,
        },
      },
    },
  ],
};

我正在使用这些版本：

"@craco/craco": "5.0.2",
"antd": "^3.16.6",
"craco-antd": "1.10.0",
"react-scripts": "3.0.0",
"typescript": "^3.4.5"

使用LESS，create-react-app，Ant Design和craco配置CSS模块，类似于react-app-rewired

0 个答案: