Какова цель файлов точек входа в Sass?
Я новичок в использовании системы IBM Carbon Design. У нас есть несколько устаревших приложений, которые не используют такие платформы, как React, поэтому мы решили использовать пакет @carbon/styles .
При чтении документации там написано
Вы можете использовать все стили для системы Carbon Design, включив
@carbon/stylesв свои файлы Sass. Например:@use '@carbon/styles';
Я создал файл Sass app.scss, который компилирую app.css и прикрепляю к нему ссылку на своей веб-странице.
Если я помещу следующее в app.scss
@use '@carbon/styles';
.test {
color: colors.$blue-50;
}
затем скомпилируйте его (используя sass app.scss app.css). Я получаю сообщение об ошибке:
Ошибка: нет модуля с пространством имен «colors».
color: colors.$blue-50;
Но если я изменю файл Sass так, чтобы он имел это, и перекомпилирую, ошибок не будет. Я могу использовать на своей веб-странице такие символы, как <p class = "test">Test</p>, и получить слово «Тест» синим цветом, что и является ожидаемым результатом.
@use '@carbon/styles';
@use '@carbon/styles/scss/colors';
.test {
color: colors.$blue-50;
}
Разница между этими двумя файлами в том, что у второго есть @use '@carbon/styles/scss/colors';.
Я этого не понимаю, потому что в документах написано, что
@use '@carbon/styles'; — чтобы вы могли «привнести все стили».
В node_modules/@carbon/styles/index.scss есть вот это
@forward 'scss/colors'
В документации Sass для @forward говорится:
Он загружает модуль по заданному URL-адресу так же, как
@use, но делает общедоступные члены загруженного модуля доступными для пользователей вашего модуля, как если бы они были определены непосредственно в вашем модуле. Однако эти члены недоступны в вашем модуле — если вы этого хотите, вам также нужно написать правило @use. Не волнуйтесь, модуль загрузится только один раз!
Это невероятно сбивает с толку. В первом предложении создается впечатление, что на scss/colors можно напрямую ссылаться через app.scss, тогда как второе предложение предполагает обратное.
В любом случае я не понимаю, что @use '@carbon/styles'; на самом деле позволяет мне делать. Это предполагает, что это обеспечивает единую точку входа для всех файлов, на которые он ссылается. Но затем вам придется ссылаться на них вручную, чтобы фактически использовать их в своем собственном файле Sass.
Какова цель файла точки входа, учитывая, что его объем настолько ограничен?
Для справки я использую версию sass 1.71.1, скомпилированную с помощью dart2js 3.3.0.
Ответы 1
Правило Sass @use загружает другой файл как модуль и присваивает ему пространство имен.
Согласно документации Sass:
По умолчанию пространство имен модуля — это последний компонент его URL-адреса без расширения файла. ...
Итак, в вашем первом примере вы используете всю библиотеку @use '@carbon/styles';, а последний компонент ее URL-адреса — styles.
Чтобы получить переменную $blue-50, вам придется использовать пространство имен styles
@use '@carbon/styles';
.test {
color: styles.$blue-50;
}
Во втором примере вы используете два модуля (или группу модулей, объединенных в один «модуль», в случае углерода/стилей) и, следовательно, получаете два пространства имен:
@use '@carbon/styles';-> Пространство имен:styles@use '@carbon/styles/scss/colors';-> Пространство имен:colors
Итак, во втором случае styles.$blue-50 и colors.$blue-50 ссылаются на одну и ту же переменную.
Еще одно замечание по поводу @use: вы действительно можете выбрать, каким должно быть пространство имен для используемого модуля.
@use '@carbon/styles' as carbon;`
as carbon сообщает компилятору, что модуль styles должен быть загружен в пространстве имен carbon. Затем вы можете указать ссылку на пакет с помощью color: carbon.$blue-50;.
Таким образом, вы сразу узнаете, какой пакет/модуль использовался, когда вернетесь к своему проекту через месяц (или годы), поскольку styles — довольно общее слово.
+1 за информацию о
... as carbon;. Это то, что опускается в документации Carbon GitHub, и это невероятно полезно для понимания того, как это работает.