bem-react-boilerplate: Расширение конфигурации (config-overrides)

[lilliputten]

Пытаюсь дополнить конфигурацию bem-react-boilerplate через config-overrides.js. Хочется:

1. Удобный синтаксис для стилей

Пытаюсь добавить обработчик SugarSS или хотя бы подключать stylus. Пока получается только добавить соотв. парсер для всех исходных .css, что не является годным вариантом -- хотелось бы, чтобы css обрабатывалось именно, как css, а остальные вкусности применялись для файлов с соотв. расширением (.sss, .styl).

Создаю объект для обработки .sss файлов по аналогии с оригинальным:

  let ssLoader = {
    test : /\.sss$/, // Вариант А: пытаемся применять к файлам `.sss`. Не работает вообще.
    // test : /\.css$/, // Вариант Б: применяем к css-файлам. Работает, но ломается на обычном css.
    use : [
      require.resolve('style-loader'),
      {
        loader : require.resolve('css-loader'),
        options : { importLoaders : 1 },
      },
      {
        loader : require.resolve('postcss-loader'),
        options : {
          ident : 'postcss_sss',
          parser : 'sugarss',
          plugins : // autoprefixer...
        },
      },
    ],
  };

Далее могу либо заменить исходный объект, либо попытаться добавить новый:

  // Replace default postcss with SugarSS
  config.module.rules[1].oneOf[2] = ssLoader;
  // Append SugarSS
  config.module.rules[1].oneOf.push(ssLoader);

Проблема в том, что оно работает только в "Варианте Б" -- только если указываю расширение .css для test, но в этом случае сыпятся ошибки, если встречается обычный css. Типа такого:

Failed to compile

./src/blocks/App/Logo/App-Logo.css
Module build failed: Syntax Error

(1:11) Unnecessary curly bracket

> 1 | .App-Logo {
    |           ^

Т.е., с одной стороны, понятно, что оно как-то работает. Но вот повесить на отдельное расширение не удаётся никак.

Такое ощущение, что есть ещё фильтрация по расширениям исходных файлов и задаваемое мной условие поиска .sss или .styl ничего не находит в отобранных файлах.

Как можно добавить своё собственный "кастомный" тип исходных файлов?

В шаблонах конфигов (node_modules/react-scripts/config/) тоже не вижу ничего подобного на список допустимых расширений. Как это делается? Что делаю не так?

2. Sourcemaps для babel

При отладке вижу только один уровень sourcemaps -- код до склейки вебпаком (уже обработанные babel'ем отдельные модули). Мой исходный код либо не передается от babel в webpack, либо не подхватывается там.

Пробовал (там же, в config-overrides.js):

1. Добавлять опции devtool: 'source-map', sourceMaps: true (или 'inline') и retainLines: true для (for babelLoader.loader).

2. Передавать sourceMaps: true для опций babel-плагина es2015.

3. Использовать config = injectBabelPlugin('source-map-support', config).

(См. How to use sourcemaps? · Issue #1 · bem/bem-react-boilerplate.)

[FA73F0X]

Тоже хотел создать тему по этой проблеме, но вижу я не один такой) Только я пытаюсь настроить через make.js и т.д., только это ничего не меняет, проблемы те же. Подождем представителей yandex, посмотрим, что скажут они.

[lilliputten]

С вопросом (2) появилась ясность. См. Can I debug source code instead of compiled one? · Issue #343 · facebook/create-react-app (Спойлер: ответ отрицательный. Надо учиться жить без полных sourcemaps. Пока, по крайней мере.)

(1) Не решено. Пока пользуюсь компромиссным подходом: цепляю разные плагины postcss, которые как-то облегчают жизнь. Где/как правильно добавлять отдельную технологию для .sss/.styl, пока не понятно. (Возможно, надо делать issue в bem/bem-react-boilerplate?)

@FA73F0X, можно пример работы с make.js и коротко -- до чего там можно дотянуться?

Ещё добавил бы:

3. Настройка параметров dev-mode express-сервера

Пока добавляю патчами в webpackDevServer.config.js (в before(app)), но это не вариант. Насколько понимаю, через config-override к этим свойствам не добраться? М.б., возможно использовать внешний конфигурационный файл?

4. Настройка сборки в production режиме

(Пока не изучал. Превентивный вопрос.) Возможно ли управлять параметрами сборки бандлов в production? UP: Решено таким же способом: патчи для файла node_modules/react-scripts/config/paths.js. Видимо, решается только через eject?

[tadatuta]

cc @Yeti-or