Я создал приложение React с использованием Webpack 4. Я использовал существующую тему, поэтому у меня есть 1 файл theme.scss, который импортирует множество других файлов scss:
@import "theme/gui/elements";
@import "theme/gui/accordion";
.
..
...
Теперь в моемLayout.js (этот компонент оборачивает все остальные компоненты, использующие стилизацию). Я импортирую этот файл theme.scss:
import 'src/assets/sass/theme.scss';
Все работает нормально, но когда я запускаю Аудит Lighthouse , явозникли проблемы.
Когда я использую mini-css-extract-plugin в моей конфигурации Webpack, CSS извлекается в один большой client.hash.css файл.Вроде как ожидали, потому что я импортирую файл в 1 местоНо когда я импортирую только один класс из theme.scss, он также создает один большой клиентский пакет со всеми CSS и Eg на домашней странице (где я использую только небольшую часть всего CSS) Lighthouse говорит: «удалить неиспользуемый CSS - возможно сохранить25 из 26 кб ".
Теперь, когда я не использую плагин mini-css-extract-plugin, Lighthouse не говорит" удалить неиспользуемый CSS ", но производительность ухудшается.
Мой вопрос заключается в том, как сделать так, чтобы Webpack создавал мои стили в куски, чтобы он создавал отдельные CSS-файлы со стилями, но только с необходимыми стилями.
Поэтому я попытался импортировать только те классы, которые я использую в компоненте.(import { navbar } from 'src/assets/sass/theme.scss';, где navbar - это имя класса), но Webpack все еще создает клиентский пакет со всеми CSS (также неиспользуемыми классами).
Есть ли способ, или я должен переписать все SCSS в модули css?