Create-React-App - отличный стартер для создания React-приложения, не отвлекающего внимания. Однако любой, кто копнет немного глубже, обнаружит, что это досадно плохо с точки зрения философии «отсутствия конфигурации». Это просто головная боль, если вы просто хотите внести небольшие изменения в данное.

Я искал и искал, но не нашел ничего, что соответствовало бы моим конкретным потребностям: изменение извлеченных файлов конфигурации CRA, чтобы разрешить плагины postCSS.

Думаю, это довольно просто для профессионалов и не беспокоит новичков. И я один из тех, кому не повезло. Поскольку простого и полезного руководства никто не выпускает, я сделаю это.

Что касается конфигурации, у вас, вероятно, есть тысячи способов сделать ее своей собственной. Я сосредоточусь только на части CSS.

Есть несколько способов обойти ограничение. Все содержат какие-то компромиссы.

Если вы хотите настроить конфигурацию веб-пакетов create-response-app без использования eject и без создания вилки сценариев реакции. Вы можете проверить: здесь и здесь.

Но знаете что, я предпочитаю катапультироваться. Да, я теряю преимущества честности CRA и будущей поддержки. Но это просто делает код более организованным. Думаю, мне просто не нравится накладывать что-то на другое.

Я провел кучу поисков, но оказалось, что это довольно просто.

yarn eject

Затем появится папка с именем config, которая содержит два связанных с веб-пакетом файла с именами * .dev.js и * .prod.js соответственно. .

Сделайте следующее с ними обоими.

Заменять

postcss: function() {
    return [
      autoprefixer({
        browsers: [
          '>1%',
          'last 4 versions',
          'Firefox ESR',
          'not ie < 9', // React doesn't support IE8 anyway
        ]
      }),
    ];
}

с участием

postcss: (webpack) => {
        return [
            require('postcss-smart-import'),
            require('postcss-cssnext'),
            require('precss'),
            require('lost')
        ];
}

Не забудьте избавиться от лишнего оператора require вверху. Вот этот:

var autoprefixer = require('autoprefixer');

Да, тебе это не нужно.

Несколько очень быстрых моментов:

  1. CRA явно использует webpack v1
  2. postcss-cssnext уже содержит autoprefixer, поэтому он вам не нужен.
  3. Добавьте необязательные конфигурации после структур require («xx»), как и по умолчанию, сгенерированные CRA.
  4. Сначала поставьте postcss-smart-import.
  5. Переход с Sass / Less на PostCSS имеет смысл. Вы можете получить ту приятную часть, которая вам нравится в Sass / Less, используя Precss, за некоторыми исключениями. Все, что вам нужно, в файлах .css без лишних зависимостей. Дали мне пять.
  6. Есть тысячи плагинов для PostCSS, которые вы можете добавить, то, что я поставил, является просто примером.
  7. Рекомендую добавить CSS-модули. И рекомендую делать это через PostCSS.
  8. Если вы используете возвышенное, управление пакетами установите Подсветка синтаксиса для CSS сообщений и измените синтаксис CSS по умолчанию на PostCSS в представлении.

Если какой-либо из приведенных здесь терминов не имеет смысла, Google. Вы найдете удивительные ресурсы, выполнив их поиск. Гораздо больше, чем я могу здесь написать.

Наслаждайтесь React.