Вступление

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

Нукстайлинг из коробки

Nuxt из коробки позволяет нам работать с CSS в отдельных файловых компонентах и ​​дает нам несколько вариантов для работы с этими стилями: global, unscoped и scoped.

Глобальный CSS

Если вы пришли из более традиционного фона CSS, global CSS будет вам наиболее знаком, global CSS позволяет импортировать CSS для использования во всем приложении. Хотя в Nuxt / Vue принято писать большинство стилей на уровне компонентов, в определенных обстоятельствах может быть полезно иметь доступный CSS повсюду. Ярким примером может служить сетка. Если в вашем проекте используется сетка, такая как Bootstap grid или Honeycomb, вам нужно будет импортировать этот CSS только один раз, и вы захотите, чтобы он был доступен во всем приложении. Чтобы импортировать global css, откройте ваш nuxt.config.js файл и перейдите к массиву css, здесь вы можете добавить любой глобальный CSS. Например, если у вас есть стили сетки в assets/css/my-grid.css, вы можете добавить их в свой глобальный массив CSS следующим образом:

css: [
    '@/assets/css/my-grid.css'
]

CSS без области видимости

Использование unscoped CSS аналогично global CSS. unscoped стилей, например global стилей, повлияют на весь проект. Однако, в отличие от global CSS, unscoped CSS находится на уровне компонента, поэтому будет загружен только в том случае, если компонент присутствует на странице. Чтобы использовать unscoped css в ваших компонентах, просто добавьте следующие теги:

<style>
    /* global styles */
</style>

CSS с областью видимости

Если вы пришли из более традиционного фона CSS, scoped CSS может быть не так знаком, идея scoped CSS появилась несколько лет назад, однако позже она устарела и удалена из HTML5 и не поддерживается ни одним крупным браузером. Однако в Nuxt это не так, создатели Vue, на основе которого Nuxt построен, поддерживают scoped стили в отдельных файловых компонентах. Назначение стилей scoped состоит в том, что они будут влиять только на компонент, в котором были указаны стили. Это может быть очень полезно при именовании стилей, потому что вам больше не нужно беспокоиться о конфликте имен классов и переопределении стилей в других компонентах вашего проекта. Чтобы использовать scoped CSS в отдельных файловых компонентах, добавьте атрибут scoped в теги стиля:

<style scoped>
    /* local styles */
</style>

А как насчет Scoped и Global CSS вместе?

В некоторых, в основном редких ситуациях, вы можете почувствовать необходимость использовать как scoped, так и unscoped CSS вместе в одном компоненте, к счастью, Vue, а Nuxt, в свою очередь, позволяет вам добавить оба. Это особенно полезно в компонентах, когда вы можете извлекать данные HTML-разметки из CMS, которую хотите стилизовать, сохраняя при этом остальную часть компонента в области видимости:

<style>
    /* global styles */
</style>
<style scoped>
    /* local styles */
</style>

SCSS в Nuxt

Nuxt / Vue по умолчанию не поддерживает SCSS или SASS, однако начать работу с SCSS или SCSS в Nuxt / Vue так же просто, как добавить зависимость и атрибут lang к вашим style тегам. Чтобы установить зависимость, откройте корень вашего проекта Nuxt в окне консоли и выполните следующую команду:

npm install --save-dev node-sass sass-loader

После установки зависимости вы сможете добавить поддержку SCSS / SASS к своим однофайловым компонентам. Чтобы добавить поддержку SCSS / SASS, откройте нужный компонент, добавьте атрибут lang и установите его значение на предпочитаемое scss или sass. Атрибут lang также можно использовать вместе с scoped, например:

<style lang="scss" scoped>
    /* local styles */
</style>

Работа с обычным импортом

Нередко при написании стилей для веб-приложения используется один источник переменных, например цветовые. При написании стилей в компонентах «Один файл» по умолчанию будут задействованы importing эти переменные в каждый компонент, которому требуется доступ к ним. Однако мы можем решить эту проблему, воспользовавшись модулем ресурсов стиля Nuxt. Чтобы установить модуль ресурсов стиля Nuxt, перейдите к корню вашего проекта Nuxt в консоли и выполните следующую команду:

npm install --save-dev @nuxtjs/style-resources

По завершении установки откройте ваш nuxt.config.js файл и добавьте @nuxtjs/style-resources в свои модули:

modules: [
    '@nuxtjs/style-resources',
]

Затем вы можете добавить свои ресурсы стиля в свой nuxt.config.js файл. Например, если вы хотите получить доступ к файлу переменных из assets/scss/variables.scss во всем приложении, вы можете добавить:

styleResources: {
    scss: [
        '~/assets/scss/variables.scss',
    ]
}

Теперь ваши переменные будут доступны во всех ваших компонентах, без необходимости import их в каждом файле.

Примечание. Не импортируйте актуальные стили. Используйте этот модуль только для импорта переменных, миксинов, функций (и т. Д.), Поскольку они не будут существовать в реальной сборке. Импорт фактических стилей будет включать их в каждый компонент, а также замедлит вашу сборку / HMR.

Если вы нашли эту статью полезной, пожалуйста, дайте ей аплодисменты, подпишитесь на меня на Medium, Dev.to и / или Twitter.