webpack-contrib / sass-loader

Compiles Sass to CSS
MIT License
3.91k stars 431 forks source link

ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema #917

Closed UrchenkoV closed 3 years ago

UrchenkoV commented 3 years ago

Hello.

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",
    "fibers": "^5.0.0",
    "node-sass": "^5.0.0",
    "nuxt": "^2.14.6",
    "sass": "^1.32.5",
    "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",
    "jest": "^26.5.0",
    "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: {
  }
}

File .scss doesn't see.

Also, scss does not work in the component.

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

The nuxt documentation says that you just need to install sass and sass-loader, but this does not work, it gives an error. The sass-loader documentation does not contain this information either.

How fix it?

alexander-akait commented 3 years ago

prependData was renamed to additionalData, please open an issue in nuxtjs (vuetify) repo