How to use SASS (not SCSS) in Vue Nuxt.js

Question

I have just created the standard tutorial nuxt.js app

Referencing a central .scss-File in nuxt.config.js is not a problem (a few simple styles contained show effect, so it truly is working).

...
css: ['~/assets/scss/main.scss'],
scss: {},
sass: {},
plugins: [],
...

Referencing a main2.sass file however...

css: ['~/assets/scss/main2.sass'],

...gets me trouble:

main2.sass

h1.title
    background: yellow
    color: white !important

ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema. - options has an unknown property 'indentedSyntax'. These properties are valid:

Worth noting: I did not add a indentedSyntax property yet!

I then tried doing so, inside the sass-array, and also inside a nested inner sassOptions...

sass: {
    sassOptions: {
        indentedSyntax: true
    }
},

But all no luck. – Do I need to stuff that somehow into webpack options (within nuxt.config.js) for webpack (under nuxt's hood) to realize?

full error message in console:

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
ValidationError: Invalid options object. Sass Loader has been initialised using an options object that does not match the API schema.
- options has an unknown property 'indentedSyntax'. These properties are valid:
object { implementation?, sassOptions?, prependData?, sourceMap?, webpackImporter? }
    at validate (/depot/sandbox/node_modules/schema-utils/dist/validate.js:49:11)
    at Object.loader (/depot/sandbox/node_modules/sass-loader/dist/index.js:36:28)

@ ./assets/scss/main2.sass 4:14-225 14:3-18:5 15:22-233
@ ./.nuxt/App.js
@ ./.nuxt/index.js
@ ./.nuxt/client.js
@ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

update

Also this (after some extensive github searching) syntax is not helping:

css: [
    '~/assets/scss/main.scss',
    { src: '~/assets/scss/main2.sass', lang: 'sass' }
],

AleDP · Accepted Answer · 2019-09-03 21:46:03Z

2

I solved a similar issue rolling back my sass-loader package to version 7.0.0 vice version 8.0.0.

Right now there is an open issue @vuejs/vue-cli in GitHub that should be related to this incompatibility:

vue-cli and sass-loader@8 incompatibility #4513

Good luck!

answered Sep 3, 2019 at 21:46

AleDP

5363 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Frank N Over a year ago

Thank you for your feedback. Sadly, rolling back is no option within the larger team. Perhaps the currently last comment bears something, that helps. Let's see…

Alexander Pospeliri · Accepted Answer · 2019-09-19 21:02:05Z

1

"custom" fix for sass files

create index.scss in assets folder
in index.scss

@import "main.sass"

in nuxt.config.js

css: ['@/assets/sass/index.scss']

it worked for me

answered Sep 19, 2019 at 21:02

Alexander Pospeliri

112 bronze badges

Comments

Despertaweb · Accepted Answer · 2020-02-04 10:42:10Z

0

This worked beautifly!

nuxt.config.js file:

 /* Global CSS */
  css: ['@/assets/main.sass'],

source: Nuxt docs - Global Settings

edited Feb 4, 2020 at 10:42

answered Feb 3, 2020 at 9:31

Despertaweb

1,83023 silver badges31 bronze badges

Collectives™ on Stack Overflow

How to use SASS (not SCSS) in Vue Nuxt.js

update

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

update

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related