Sass Loader Error: Invalid options object that does not match the API schema

Question

I\'m using VueJS with the framework VuetifyJS (v2.0.19). I\'m getting this error after running npm run serve:

Sass Loader has been initialise

Answer 1

If you are using vue-cli 4 and in order to avoid this error you need to change the config of sass-loader in vue.config.js like the example below, after that the error will be fixed.

const path = require('path');

module.exports = {
  chainWebpack(config) {
    config
      .entry('app')
      .clear()
      .add('./src/core/main.js')
      .end();
    config.resolve.alias
      .set('~', path.join(__dirname, './src'))
      .set('@', path.join(__dirname, './src/core'))
      .set('#', path.join(__dirname, './src/modules'))
  },
  css: {
    loaderOptions: {
      sass: {
        sassOptions: {
          includePaths: [
            path.resolve(__dirname, 'src/core/')
          ],
          indentedSyntax: true,
        },
        prependData: '@import "~@/assets/sass/main.scss"',
      },
    },
  },
  assetsDir: '@/assets/',
}

Don't forget to specify your own configuration. Please checkout the configuration on the sass-loader repo.

If you use vue cli 3, it works with sass-loader v7 not with v8 if you use vue cli 3 and sass-loader v7 the previous configuration still works.

Good luck and regards.