Блог

Главная - Вопросы по программированию - Materializecss

Materializecss

#vue.js #materialize

Вопрос:

Я установил materializecss в свой проект Vue 3.0 с помощью npm.
Он импортирован в мой main.js:

 import 'materialize-css/dist/css/materialize.min.css'

Все работает нормально, но когда я хочу использовать @extend для раскрашивания текста, вот так:

 <style lang="scss">
  .a {
      @extend .grey-text, .text-lighten-3;
  }
</style>

Я получаю сообщение об ошибке:

 SassError: The target selector was not found.
Use "@extend .grey-text !optional" to avoid this error.

Если я использую «!необязательно», правило не применяется.
Можно ли использовать расширения materializecss sass в Vue3? Если да, то как?

Ответ №1:

Сначала вам нужно импортировать/инициализировать часть Sass, содержащую правило CSS (селектор), которое будет расширено.

Sass в файлах компонентов Vue имеет область действия и не видит никакого кода за пределами этого файла (даже если вы не используете scoped ключевое слово в теге стиля). Это также dart-sass работает по умолчанию.

Предполагая, что Materialize установлен как node_module и что часть типографии находится там, где находится ваш расширенный класс, вы @используете его следующим образом:

 @use 'materialize-css/sass/components/_typography' as *;

a {
  @extend .grey-text, .text-lighten-3;
}

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

1. Спасибо, я пытался, но все та же ошибка, обновлено в процентах

2. Извините, я неправильно понял проблему, после секундного раздумья я обновил ответ. Вам не нужны %, точки должны работать. Чего не хватает, так это расширяемого класса, который вам нужно сначала импортировать с помощью @use.

3. Доказательство аналогичной концепции здесь, где мы @используем переменные из пакета узлов в компоненте Vue: github.com/ahansson/hgrid-css-vue-vite/blob/master/src/…

4. Путь на самом деле @use ‘материализовать-css/sass/материализовать.scss’ как *; но ответ был правильным!! У меня есть еще один вопрос: если бы я использовал другой препроцессор scss, доступный с vue cli (node sass или smt), решило бы это проблему без использования @use?

5. Хорошо, обновим ответ. с правильным путем, но будьте осторожны, если вы @используете materialise.scss, вы импортируете полную структуру в свой компонент. Вместо этого попробуйте найти конкретный файл, в котором находится ваш расширяемый класс, чтобы избежать получения полного дубликата Materialize в каждом компоненте. Node-sass к настоящему времени устарел, его не следует использовать. До того, как sass-dart все в Sass, вероятно, было глобальным, они изолировали модули @use и другие методы, позволяющие использовать пространство имен. Более обременительный, но и гораздо более надежный в крупных проектах.

Метки: