Webpack: [Question] How can I import SASS/SCSS file in main.js

[amranidev]

Greetings,

I'm trying to import/require an scss file in main.js

// main.js
require('./assets/sass/app.scss')

I got an error

This relative module was not found:

* ./assets/sass/app.scss in ./src/main.js

app.scss path : /src/assets/sass/app.scss

main.js path : /src/main.js

any suggestion please!!

[grantcarthew]

Checkout vue-foundation as a reference. That template is importing scss files.

[amranidev]

This is the solution.
Go to build/utils.js and change
scss: generateLoaders('css') to scss: generateLoaders('sass')

[LinusBorg]

This should simply work, provided that sass-loader is installed.

The code line you changed certainly was and is scss: generateLoaders('sass'), so i don't know why yours was scss: generateLoaders('css') as you say.

But good that it works for you now.

[amranidev]

@LinusBorg Thanks
I'm using vue-cli, the code line was css, so I've changed it to sass and it works now.
but while compiling, I got errors such like 'unexpected syntax' and stuffs like that, so I realize that I have to install sass-loader, and everything works out in the end.