Почему не работают глобальные стили в Nuxt + Vue?

Question

[photosho]

Делаю сайт на Nuxt 3 и VueJs. Подключаю глобальные стили scss таким образом:

vite: {
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
          @import "@/assets/css/main";
        `,
      },
    },
  },
},

В main.scss импортируются остальные глобальные стили. Стили для элементов (например, body) работают хорошо, а стили вспомогательных классов не хотят. Они загружаются - их можно увидеть в панели разработчика в браузере, но к элементу по какой-то причине не применяются.

Если в том же глобальном файле описывать, например, стили анимации (.slide-fade-enter-active и т.д.), то они тоже не применяются к элементам, когда Vue устанавливает эти классы.

Кто-нибудь сталкивался с такой проблемой? В чем может быть дело?

Comments

[modelair]

попробуй импортируй стиль обычными средствми, типа import "@/assets/css/main.scss"

[modelair]

возможно, как-то связано с этим: Почему не проставляется атрибут data-v у стилей vue компонента при билде роллапом?

[Владислав Лысков]

я не уверен, но ...
preprocessorOptions
scss
а вы скармливаете ему css, мб в этом причина?

[photosho]

Владислав Лысков, нет, это папка css, а внутри лежит scss.

Answer 1

[photosho]

Проблема решена, всем спасибо. Оказалось, что даже глобальные scss он преобразует при использовании механизма css-модулей. То есть, добавлял к моему классу еще какой-то суффикс - в разделе css класс выводился как есть, а где-то в скомпилированном css в памяти он был с суффиксом и поэтому не работал.

Лечится помещением глобальных классов в раздел "global":

:global {
  .myclass {
    ...
  }
}

Comments

[modelair]

какой-то странный билд у вас в таком случае.

[photosho]

modelair, почему странный?

Answer 2

[Алексей Ярков]

Они загружаются - их можно увидеть в панели разработчика в браузере, но к элементу по какой-то причине не применяются

Чудес не бывает. Если стили загружены и видны в браузере, и селектор совпадает с селектором элементов на странице, то будет работать. Проверяйте лучше. Ну и конечно же порядок выполнения посмотрите.

Comments

[photosho]

В разделе "стили" этот стиль есть, а в инспекторе при выборе элемента с классом его нет, и соответственно он не применяется.

[Алексей Ярков]

photosho, ну я про селекторы и написал поэтому))

[photosho]

Алексей Ярков, возможно, я не так вас понял. Это обычный класс, и у элемента в инспекторе видно, что установлен такой же, то есть, стиль по всем правилам должен срабатывать.