Вступление
При создании приложения в 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.