Comment utiliser SASS (pas SCSS) dans Vue Nuxt.js

Question

Je viens de créer le app tutoriel standard nuxt.js

Référencer un .scss Central - Le fichier dans nuxt.config.js N'est pas un problème (quelques styles simples contenaient un effet show, donc ça marche vraiment).

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

Référencer un fichier main2.sass Cependant ...

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

... me pose problème:

main2.sass

h1.title
    background: yellow
    color: white !important

ValidationError: objet d'options non valide. Sass Loader a été initialisé à l'aide d'un objet options qui ne correspond pas au schéma d'API. - options a une propriété inconnue 'indentedSyntax'. Ces propriétés sont valides:

À noter: Je n'ai pas encore ajouté de propriété indentedSyntax!

I alors a essayé de le faire, à l'intérieur du tableau sass -, et aussi à l'intérieur d'un sassOptions intérieur imbriqué ...

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

Mais pas de chance. - Ai-je besoin de mettre cela en quelque sorte dans les options du webpack (dans nuxt.config.js) Pour que le webpack (sous le capot de nuxt) se réalise?

message d'erreur complet dans la 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

mettre à jour

De plus, cette syntaxe (après quelques recherches approfondies sur github) n'aide pas:

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

Answer 1

Cela a fonctionné magnifiquement!

Fichier nuxt.config.js :

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

source: Nuxt docs - Global Settings