Доступ к содержимому CSS-файлов с помощью Webpacker

Question

Используя Webpacker, я могу загружать файлы css, и они получают выходные данные в файлах пакета таблиц стилей, но иногда я хотел бы получить доступ к CSS в этих файлах из javascript для использования, скажем, в конфигурации редактора WYSIWYG (указав некоторые дополнительные стили для IFRAME). Другой вариант - получить доступ к общему пути файла CSS, загруженного следующим образом:

import froala_style from '../../../css/froala.css'

Я подозреваю, что это связано с загрузчиком css, который поставляется с Webpacker. Его работа состоит в том, чтобы загрузить css и скомпилировать его в отдельный файл. Я думаю, что не может быть двух загрузчиков CSS одновременно? Может ли быть ответ применить фильтры к пользовательскому загрузчику, чтобы он действовал только для файла, который я хочу загрузить в виде текста или пути?

Answer 1

Можно переопределить существующие загрузчики для определенного импорта следующим образом:

import froala_style from '!css-loader!../../../css/froala.css'

Добавление ! переопределяет существующие загрузчики, позволяя нам указать наши собственные. В этом примере можно вызвать froala_style.toString(), чтобы получить содержимое файла CSS.

Для справки: https://webpack.js.org/concepts/loaders/#inline