Сконфигурируйте модули CSS с помощью LESS, create-реагировать-приложение, Ant Design и craco, подобно тому, как реагирует-приложение-перемонтировано - PullRequest
Новая
       39

Сконфигурируйте модули CSS с помощью LESS, create-реагировать-приложение, Ant Design и craco, подобно тому, как реагирует-приложение-перемонтировано

0 голосов
/ 30 апреля 2019

Я пытаюсь настроить craco, чтобы заставить CSS-модули работать с LESS, а также antd. craco аналогично react-app-rewired, позволяет изменять create-react-app без извлечения.

Для этого я использую плагин craco-antd. Он уже делает то, что необходимо, чтобы импортировать только необходимый стиль antd и заставить МЕНЬШЕ работать.

Пока у меня либо работают стили 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"
...