Нет, вы не можете - без использования загрузчиков. Resolve позволяет изменять разрешение только путей, а не саму загрузку, что означает, что вы не можете заменить / изменить загруженный контент.
Вы можете использовать Babel, который позволяет пропустить такой импорт. Для React существует даже целый пакет для этого: Babel-Plugin-React-CSS-Modules . Этот пакет позволяет включать и разрешать имена стилей, но хранить таблицу стилей отдельно от сценария при тестировании / рендеринге на стороне сервера.
Если вы используете Jest, в нем есть отдельный раздел Обработка статических активов .
В общем, это зависит от того, чего вы хотите достичь. Многие фреймворки - или, по крайней мере, конфигурации webpack / babel - зависят от импортированных имен стилей (часто хэшируются или что-то в этом роде). Это означает, что вам нужны разрешенные имена классов ваших таблиц стилей внутри ваших скриптов. В противном случае вы не сможете запускать условия и другие алгоритмы для них.
Babel и другие приложения / библиотеки позволяют вам именно это. Они разрешают ваши scss
или css
таблицы стилей с помощью import
или require
и смотрят, какие классы находятся внутри таблицы стилей, чтобы отобразить их в объект внутри javascript. После этого они не обращают внимания на таблицы стилей. Это делает его идеальным для тестов и рендеринга на стороне сервера, поскольку классы разрешаются, но обрабатываются другим загрузчиком веб-пакетов.
Больше нет необходимости в отдельной функции loadStyles
, которая могла бы делать именно это, кроме случаев, когда вы загружаете стили из удаленного режима. Насколько мне известно, в данный момент webpack не поддерживает это (но и здесь могут помочь загрузчики).
Если вы действительно хотите сделать много необычных изменений в ваших таблицах стилей, придерживайтесь require
, напишите свой собственный загрузчик для него и активируйте / деактивируйте загрузчик на основе параметра ENV
(например, production | test | development
) .