Globally accessible CSS and SCSS in your Nuxt component files
Tags: vue, css, javascript, tutorial
Published: 2020-06-10 11:24:16

# 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](https://getbootstrap.com/docs/4.0/layout/grid/) or [Honeycomb](https://honeycomb.wearethreebears.co.uk/), 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](https://medium.com/@wearethreebears), Dev.to and/ or [Twitter](https://www.twitter.com/wearethreebears).