Пытаюсь дополнить конфигурацию 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):
Добавлять опции devtool: 'source-map', sourceMaps: true (или 'inline') и retainLines: true для (for babelLoader.loader).
Передавать sourceMaps: true для опций babel-плагина es2015.
Использовать config = injectBabelPlugin('source-map-support', config).
(См. How to use sourcemaps? · Issue #1 · bem/bem-react-boilerplate.)
