Integrate sass into Next Js

Sass is a CSS preprocessor, which adds special features such as nested rules and mixins into regular CSS. The syntax used in Sass is called SCSS.

Installations

In order to get Sass to work with Nuxtjs, we will need to install the following packages. I’m assuming you’ve already installed Nuxtjs

1. Style Resources.
2. Sass
3. Sass loader version 10 ( the latest version causes a conflict. )

Note:- We will be using NPM for this tutorial.

npm i @nuxtjs/style-resources sass sass-loader@10

Once all the packages have successfully been installed, we can move on to the next step:

Configuration

Before we can start using sass we need to setup a few more things, let’s configure the style-resources package in our nuxt config Note:- I'm assuming you use Nuxtjs with JavaScript, not TypeScript.

buildModules: [
    '@nuxtjs/style-resources'
],
styleResources: {
  scss: [
    '@/assets/scss/app.scss',
    '@/assets/scss/mixins.scss'
  ],
  hoistUseStatements:  true,
},

As you can see, we are telling Nuxt where the base of our sass files will be. I placed mine in the scss section of the assets folder I created. The app.scss file is typically where I place universal configurations such as colors and viewport definitions. Take a look at the app.scss file of one of my nuxt apps:

// Color Pallete
$light:  #F5F5F5;
$dark:  #0A0A0A;
$success:  #85CB33;
$warning:  #D78521;
$danger:  #CC2936;
// Viewport Sizes
$small:  728px;
$mediumDesktop:  900px;
html,
body  {
  background: $light;
  overflow-x: hidden;
}

The mixins.scss file is how I add mix-ins. Note:- You don't have to add the mix-in file. Do so only if you want to add mixins

Once you’ve done all this, you can then begin to use

<style lang="scss" scoped>
.blog  {
  width:  90%;
  margin:  0 auto;
  padding:  1rem;
}
</style>

Happy Coding!