Nuxt throws this error, Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError. how to fix?

Question

Sass

Good afternoon.

Full text of the error

Module build failed (from ./node_modules/sass-loader/dist/cjs.js): ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema. - options has an unknown property 'prependData'. These properties are valid: object { implementation?, sassOptions?, additionalData?, sourceMap?, webpackImporter? } at validate (C:\OSPanel\domains\pizza-vue.loc\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:104:11) at Object.loader (C:\OSPanel\domains\pizza-vue.loc\node_modules\sass-loader\dist\index.js:30:29)

package.json

{
"name": "Pizza",
"version": "1.0.0",
"private": true,
"scripts": {
"dev": "nuxt -c client/nuxt.config.js",
"build": "nuxt build -c client/nuxt.config.js",
"start": "nuxt start -c client/nuxt.config.js",
"generate": "nuxt generate",
"test": "jest"
},
"dependencies": {
"@nuxtjs/auth": "^4.9.1",
"axios": "^0.21.1",
"core-js": "^3.6.5",
"node-sass": "^5.0.0",
"nuxt": "^2.14.6",
"sass-loader": "^10.1.1"
},
"devDependencies": {
"@nuxtjs/style-resources": "^1.0.0",
"@nuxtjs/vuetify": "^1.11.2",
"@vue/test-utils": "^1.1.0",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^26.5.0",
"fibers": "^5.0.0",
"jest": "^26.5.0",
"sass": "^1.32.5",
"vue-jest": "^3.0.4"
}
}

nuxt.config.js

import colors from 'vuetify/es5/util/colors'

export default {
srcDir: __dirname,

// Global page headers (https://go.nuxtjs.dev/config-head)
head: {
titleTemplate: '%s - Pizza',
title: 'Pizza',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
{ hid: 'description', name: 'description', content: '' }
],
link: [
{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
]
},

// Global CSS (https://go.nuxtjs.dev/config-css)
css: [
'~/assets/frontend/frontend.scss',
],

// Plugins to run before rendering page (https://go.nuxtjs.dev/config-plugins)
plugins: [
],

// Auto import components (https://go.nuxtjs.dev/config-components)
components: true,

// Modules for dev and build (recommended) (https://go.nuxtjs.dev/config-modules)
buildModules: [
// https://go.nuxtjs.dev/vuetify
'@nuxtjs/vuetify',
],

// Modules (https://go.nuxtjs.dev/config-modules)
modules: [
'@nuxtjs/style-resources',
'@nuxtjs/axios',
'@nuxtjs/auth'
],
styleResources: {
//sass: [],
scss: [
'~/assets/frontend/frontend.scss',
],
//less: [],
//stylus: []
},

axios: {
baseURL: "http:localhost:8000",
credentials: true
},

auth: {
redirect: {
login: '/login',
logout: '/',
callback: '/login',
home: '/'
},
strategies: {
local: {
endpoints: {
login: { url: '/login', method: 'post', propertyName: false },
user: { url: '/api/user', method: 'get', propertyName: false }
},
tokenRequired: false,
tokenType: false
}
},
localStorage: false
},

// Vuetify module configuration (https://go.nuxtjs.dev/config-vuetify)
vuetify: {
customVariables: ['~/assets/variables.scss'],
theme: {
dark: false,
themes: {
dark: {
primary: colors.blue.darken2,
accent: colors.grey.darken3,
secondary: colors.amber.darken3,
info: colors.teal.lighten1,
warning: colors.amber.base,
error: colors.deepOrange.accent4,
success: colors.green.accent3
}
}
}
},

// Build Configuration (https://go.nuxtjs.dev/config-build)
build: {
}
}

The file does not load, does not see it.

And if I write styles in the component and specify scss, then it also gives an error.

<style lang="scss">
  .headline {
    color: green;
  }
</style>

If you remove lang="scss" then just css works.

Where is the mistake?

Answer 1

install "npm node-sass sass-loader -D" Nuxt doesn't understand the code inside the style block that it's a preprocessor)