Я работаю над проектом, в котором есть основной файл style.scss для ряда компонентов. Я хочу реструктурировать код, чтобы у каждого компонента была своя папка (index.js, styles.scss). Есть вложенный класс, который использует класс из другого компонента, и теперь, когда мне нужно разделить все стили, эта часть сломана. Я не могу использовать композицию, так как это вложенный класс. Какие еще подходы я могу использовать?
Код выглядит так:
// Component A styless.scss
.component-a-class {
}
// Component B styless.scss
.component-b-class{
.component-a-class {
}
}
Используйте директиву Sass @import
для импорта внешних классов. Ваш код станет примерно таким:
// ComponentA/styless.scss
.component-a-class {
...
}
// ComponentB/styless.scss
.component-b-class{
@import "../ComponentA/styless.scss"
}
Это введет .component-a-class
в .component-b-class
как вложенное правило.
Редактировать: Чтобы импортировать стиль, а также иметь возможность изменять значения одного из его свойств, вы должны использовать Sass миксины:
// ComponentA/styless.scss
@mixin component-a-class($width: 100) {
.component-a-class {
width: $width + px;
}
}
@include component-a-class();
// ComponentB/styless.scss
@import "../ComponentA/style.scss";
.component-b-class{
@include component-a-class(500);
}
Это даст вам то, что вы хотите, хотя это не идеально. Результирующий скомпилированный файл ComponentB/styless.css
будет включать все, записанный на ComponentA/styless.scss
, потому что директива @import
является функцией «все или ничего» (выборочный импорт отсутствует). Результат будет выглядеть так:
// ComponentB/styless.css (compiled)
.component-a-class {
width: 100px;
}
.component-b-class .component-a-class {
width: 500px;
}
Кажется, это не работает. Я забыл упомянуть, что я также хочу изменить ширину всего component-a-class с component-b-class
Обновлено, чтобы включить дополнительные пояснения.
Попробуйте посмотреть это youtube.com/watch?v=GTBaQ2DcGUk