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.