Sass Configuration

Install Sass

As we are going to work with sass we will need to install node-sass and sass-loader

      npm i node-sass sass-loader
    

Create the styles Folder

First lets create some folders for your images fonts and styles. Create a folder for each one inside the assets folder. You can name this whatever you like, styles or scss etc

Adding the styles

In the scss folder lets create a styles.scss file and a varialbes.scss file and a fonts.scss file.

Then open the styles.scss file and add the following so that the fonts and variables are included:

      @import 'fonts';
      @import 'variables';
    

Now you can go to your default.vue page in the layouts folder and cut the styles from there into the styles.scss file. I prefer to have all my styles in the styles.scss instead of tring to remember that there are also some styles in the default layout. However if you have a project with many different layouts then maybe having your styles there works best for you.

Add your styles to the nuxt config

Now that we have created a styles.scss file with our styles you will probably see if you have the dev server open that you now have no styles. So lets now tell Nuxt that that file exists. To do this we need to open our nuxt config and add this to the css option. You may need to change this if your route or name of your styles is differnt. Also you can add more than one should you require however I prefer to add this to the styles.scss so I have a better idea of what is loding without having to open the nuxt config but adding the styles here is a good option for adding any vendor styles that you may require

      css: ['~assets/scss/styles.scss'],
    

Globally include your variables

As you may have seen we have created a varialbes folder. This is where we put our variables such as colors etc. We can have separate files that are imported into this this or we can just add all varialbes here. This will depend on the size of your project. Obviously we want these varialbes to be available across all our components and to save us having to write an import inside each component we can gloabally install this file to make it avaialable everywhere. This is extremely useful for cases such as varaibles or mixins.

To do this we need to install the nuxt style recources loader

      npm i @nuxtjs/style-resources
    

Then we need to tell nuxt which file we want to globally make available. Open the nuxt.config.js and add to the modules the following code:

      modules: [
        ['@nuxtjs/style-resources']
      ],
      styleResources: {
        scss: ['~assets/scss/variables.scss'], 
      }
    

In order for this to load properly you will need to stop and start your servers again

      npm run dev
    

Yes it's true, you are not going to see anything just yet as we haven't added anything to the varialbes file.

Test it out

To test it out lets create a variable for example a primary color. Add this to your varialbes.scss

      $primary: red;
    

Now let's add this to our component. We only have one component. The logo. It's ok for testing so let' do it. In the style tag of the Log add the following:

      <style lang="scss" scoped>
    

Here we are telling vue to use scss for the styles and to make the styles scoped so they only effect this component. You can choose to have all components as scoped or just some. The choice is yours. You can also have multiple style tags in your component so you can have a mix of scoped and non scoped. You could also have one for scss and another style tag just for css but really why would you want to?

Now all you have to do is add a style with the color $primary and you should see the color change.

      body {
        background-color: $primary;
      }
    

Ok yes your right it's really ugly but it works but yeh maybe you should delete it :)

Purge your css

This is a very handy tool especially if you are working with frameworks like like Bootstrap, Materializecss, Foundation, etc... where you will only use a small set of the framework and a lot of unused css styles will be included.

Purgecss analyzes your content and your css files and matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files

      npm i nuxt-purgecss
    

Next add nuxt purgecss to the moudles section in your nuxt.config

      modules: [
        'nuxt-purgecss',
      ],