Как расширить внешние классы CSS в компоненте Vue?
Например, если у меня есть что-то подобное в моем компоненте:
<style lang = "scss" scoped>
.color-blue {
color: blue;
}
.orange-blue {
@extend .color-blue; // This works!
@extend .bg-orange; // .bg-orange is defined in another css file somewhere. This doens't work
}
</style>
Я получаю сообщение об ошибке
".orange-blue" failed to @extend ".bg-orange".
The selector ".bg-orange" was not found.
Я читал, что могу добавить
@import 'path/to/orange.css'
к моему блоку стиля, но, похоже, здесь это не помогает. Кроме того, не приведет ли это к повторению CSS для каждого компонента, который его импортирует?
Ответы 3
Импортируйте файл с другими подобными стилями
<style lang = "scss" scoped>
@import '~styles/mixins';
...
</style>
или используйте обычный путь
@import '../../../styles/mixins';
Вы можете сделать это следующим образом:
Создайте файл, содержащий класс, который вы хотите расширить:
src/styles/style.scss
.my_class_to_extend {
backgroud-color: aqua;
}
В вашем файле vue.config.js вы добавляете следующее, указывающее на ваш файл:
module.exports = {
css: {
loaderOptions: {
sass: {
data: `@import "@/styles/style.scss";`
}
}
}
}
После этого вы можете без проблем расширить свой компонент vue:
...
<style lang = "scss" scoped>
.my_extended_class {
@extend .my_class_to_extend;
}
Обратите внимание, что для его использования вам все время нужны файлы scss, а не css.
Короче говоря, вы не можете расширить класс CSS в файле *.scss, импортировав простой файл *.css. Компилятор Scss выдаст ошибку SassError: The target selector was not found.
Самый простой способ — переименовать указанный файл *.css в *.scss. Так что результат будет как @import 'path/to/orange.scss'