Как подключить PostCSS в Create-React-App 2?

Question

[Станислав Возиков]

Подскажите пожалуйста. Хочу в create-react-app 2 добавить плагин для PostCSS nesting (https://www.npmjs.com/package/postcss-nesting). Сделал eject и в конфигурации вебпака дописал его. Но наследование не работает. Кто имел дело с PostCSS в CRA2, подскажите что я сделал не так? Или может есть способ подключать модули без eject?

Второй день гуглю, но безуспешно.

loader: require.resolve('postcss-loader'),
      options: {
        // Necessary for external CSS imports to work
        // https://github.com/facebook/create-react-app/issues/2677
        ident: 'postcss',
        plugins: () => [
          require('postcss-flexbugs-fixes'),
          require('postcss-preset-env')({
            autoprefixer: {
              flexbox: 'no-2009',
            },
            stage: 3,
          }),
          require('postcss-nesting'), // <------ Вот сюда добавил модуль
        ],

Comments

[Mikhail Osher]

Демку на гитхабе покажете?

[Станислав Возиков]

Mikhail Osher, https://github.com/vostack13/cra2-postcss вот

Answer 1

[Mikhail Osher]

require('postcss-nesting')() – вызовите фактори-функцию, которая из модуля возвращается

// EDIT

Что это Вы нам голову дурите! :)
Читайте сначала спецификацию, а потом выдумывайте несуществующие CSS правила.

.SomeClass {
  &-foo { // < Такого в спецификации нет!
    
  }
}

.App {
  text-align: center;

  &.gg { // < работает 
    color: #1e90ff;
    }
}

Comments

[Станислав Возиков]

Я так тоже пробовал. Не понимаю в чем дело...

[Mikhail Osher]

Станислав Возиков, в обоих конфигах (dev & prod) поправили?

[Станислав Возиков]

Mikhail Osher, да. И никак... Вот поэтому и решил спросить здесь. Я уже второй день пытаюсь настроить. Как я только не пробовал

[Станислав Возиков]

Спасибо, разобрался! Я подключил модуль(postcss-nesting) который не умеет соединять имена классов. Такое умеет другой модуль postcss-nested. https://dev.to/puritanic/add-postcss-to-create-rea...