В проекте Angular, использующем CLI и Sass, как я могу увидеть скомпилированный компонент CSS?

#angular #sass #angular-cli

#angular #sass #angular-cli

Вопрос:

В нашем проекте Angular 10 мы используем Sass для всех наших таблиц стилей компонентов. Angular компилирует Sass, затем доставляет таблицы стилей с помощью javascript.

Это здорово, за исключением случаев, когда приходит время проверить наш скомпилированный CSS, чтобы увидеть, где могут быть недостатки в нашем Sass. При создании проекта я получаю предупреждение о размере, что некоторые таблицы стилей превышают бюджет, но я не знаю способа увидеть эти таблицы стилей в форме CSS, чтобы понять, почему мы превышаем бюджет, и где есть возможности для улучшения.

Я считаю, что таблицы стилей проходят через фазу «css» в процессе сборки angular — есть ли какой-нибудь способ захватить их, чтобы я мог напрямую проверять эти файлы?

Комментарии:

1. Я думаю, вы можете добиться чего-то подобного, используя @angular-builders/ custom-webpack и пользовательскую конфигурацию webpack. Я никогда не делал этого раньше, но я написал несколько схем, используя пользовательскую конфигурацию webpack.

2. также прочитайте эту статью Несколько пакетов CSS с webpack .

3. Хм… В идеале, я не пытаюсь собрать новую систему сборки, я просто хочу получить максимальную отдачу от файлов, которые уже создаются (я полагаю). Но я посмотрю. Спасибо за предложение.