Import scss module in Nuxt application

Question

I want to import a SCSS file in my Nuxt project.

For this I tried to follow the documentation where I simply add the path with filename in css file as:

nuxt.config.js

css: ['@/scss/_introPage.scss]

But it gives error as

Cannot find module '../scss/_introPage.scss'

My folder structure:

> components
> pages
> scss > _introPage.scss
> static
> store
> test
> nuxt.config.js
> package.json

How can I include the SCSS file and apply the global CSS into my project?

If anyone needs any further information please let me know.

Answer 1

Thank you everyone for your input.

I had to install --save-dev sasss sass-loader@10 fibers for it to work.

Answer 2

Nuxt.js provides a good way to share global CSS files with a css option in nuxt.config.js

example:

// nuxt.config.js
export default {
  
  // other options
  
  css: [
      // Load a Node.js module directly (here it's a Sass file)
     'bulma',
     // CSS file in the project
     '@/assets/css/main.css',
     // SCSS file in the project
     '@/assets/css/main.scss'
  ],
  
  // other options

}

in your case, you need to add sass and sass-loader to load sass, scss, less &... files in your projects.

SASS: yarn add sass-loader sass
LESS: yarn add less-loader less
Stylus: yarn add stylus-loader stylus

to share your global style files(scss, sass, & ... ) and other good features you can use Nuxt Style Resources .

Share variables, mixins, functions across all style files (no @import needed)

Add @nuxtjs/style-resources dependency using yarn or npm to your project with on of these commands:

yarn add -D @nuxtjs/style-resources or npm install --save-dev @nuxtjs/style-resources

and then you can add '@nuxtjs/style-resources' in buildModules option in nuxt.config.js file import your global scss files like this:

// nuxt.config.js
export default {

   // other options

   buildModules: [
   '@nuxtjs/style-resources',
   ],

   styleResources: {
      // your settings here
      scss: ['@/assets/scss/_introPage.scss'],
      sass: [],
      less: [],
      stylus: [],
      hoistUseStatements: true  // Hoists the "@use" imports. Applies only 
      to "sass", "scss" and "less". Default: false.
   }

   // other options

}

for more information see this link https://www.npmjs.com/package/@nuxtjs/style-resources