Introduction
When building an App in Nuxt, it's likely you may choose to take advantage of the style tag with your single file components. The style tag in single file components allows you keep all of your component specific styles together with your component's template markup and scripts.
Nuxt styling out of the box
Out of the box Nuxt allows us to work with CSS in single file components and gives us a couple of options for working with those styles, global
, unscoped
and scoped
.
Global CSS
If you come from a more traditional CSS background, global
CSS will be most familiar to you, global
CSS allows you to import CSS for use throughout your entire App. While in Nuxt/ Vue it's common practice to write the majority of styles at component level, it can be useful in certain circumstances to have CSS that is available throughout. A prime example would be a grid framework, if your project is using a grid framework like Bootstap grid or Honeycomb, you will only want to import that CSS once and you'll want it available throughout your Application. To import global
css, open your nuxt.config.js
file and navigate to the css
array, here you can add any global CSS. For example if you have a grid styles in assets/css/my-grid.css
you can add that to your global CSS array like so:
css: [
'@/assets/css/my-grid.css'
]
Unscoped CSS
The use of unscoped
CSS is similar to global
CSS. unscoped
styles, like global
styles will effect the entire project. However, unlike global
CSS, unscoped
CSS is at component level, so will only be loaded if the component is present on the page. To use unscoped
css in your components simply add the following tags:
<style>
/* global styles */
</style>
Scoped CSS
If you come from a more traditional CSS background, scoped
CSS may not be so familiar, the idea of scoped
CSS was floated a number of years ago, however it was later deprecated and removed from HTML5 and is not supported by any major browser. However in Nuxt that is not the case, the creators of Vue, which Nuxt is built on top of, supports scoped
styles within single file components. The purpose of scoped
styles is that they will only effect the component in which the styles have been specified. This can be hugely advantageous when naming styles because you no longer have to worry about class names clashing with and overriding styles within other components in your project. To use scoped
CSS in your single file components add the scoped attribute to your style tags:
<style scoped>
/* local styles */
</style>
What about Scoped and Global CSS together?
In some, mostly rare, situations you may feel the need to use both scoped
and unscoped
CSS together in a single component, thankfully Vue and in turn, Nuxt makes it possible for you to add both. This comes in particularly helpful in components when you may be pulling in HTML markup data from a CMS which you'd like to style, while keeping the rest of the component scoped:
<style>
/* global styles */
</style>
<style scoped>
/* local styles */
</style>
SCSS in Nuxt
Nuxt / Vue doesn't come with SCSS or SASS support by default, however getting started with SCSS or SCSS in Nuxt / Vue is as simple as adding a dependency and a lang
attribute to your style
tags. To install the dependency, open the root of your Nuxt project in your console window and run the following command:
npm install --save-dev node-sass sass-loader
Once the dependency is installed, you'll be able to add SCSS/ SASS support to your single file components. To add SCSS/ SASS support, open your desired component and add the lang
attribute and set it's value to your preferred scss
or sass
. The lang
attribute can also be used in conjunction with scoped
, for example:
<style lang="scss" scoped>
/* local styles */
</style>
Dealing with common imports
It's not uncommon when writing styles for your web application to have a single source of variables, for example color variables. When writing styles within Single file components, by default this would involve importing
those variables into every component that needs access to them. However, we can resolve this by taking advantage of the Nuxt Style Resource module. To install the Nuxt Style Resource module, navigate to the root of your Nuxt project in your console and run the following command:
npm install --save-dev @nuxtjs/style-resources
Upon completing the installation, open your nuxt.config.js
file and add @nuxtjs/style-resources
to your modules:
modules: [
'@nuxtjs/style-resources',
]
You can then add your Style Resources to your nuxt.config.js
file. For example, if you'd like access to a variables file from assets/scss/variables.scss
throughout your app, you could add:
styleResources: {
scss: [
'~/assets/scss/variables.scss',
]
}
Your variables will now be available in all of your components, without the need to import
them in every file.
Note: Do not import actual styles. Use this module only to import variables, mixins, functions (et cetera) as they won't exist in the actual build. Importing actual styles will include them in every component and will also make your build/HMR magnitudes slower.
If you’ve found this article useful, please follow me on Medium, Dev.to and/ or Twitter.
Top comments (0)