Import scss module in Nuxt application - vue.js

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 sass, sass-loader#10 and fibers for it to work.
nom install --save-dev sass sass-loader#10 fibers

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