10

I am upgrading Vuetify in my Vue CLI 3 project from version 1.5 to 2. I have followed these instructions, doing a full install. Since the upgrade, running 'npm run serve' gives me a ton of errors looking like this:

error  in ./node_modules/vuetify/src/components/VGrid/_grid.sass

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 (C:\Users\kristoffer.dahl\Documents\Prosjekter\fridgein\fridgein_fe\node_modules\sass-loader\node_modules\schema-utils\dist\validate.js:50:11)
        at Object.loader (C:\Users\kristoffer.dahl\Documents\Prosjekter\fridgein\fridgein_fe\node_modules\sass-loader\dist\index.js:36:28)

All errors look the same, except for the Vuetify component mentioned.

This is my package.json:

{
  "name": "fridgein_fe",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.22",
    "@fortawesome/free-brands-svg-icons": "^5.10.2",
    "@fortawesome/free-regular-svg-icons": "^5.10.2",
    "@fortawesome/free-solid-svg-icons": "^5.10.2",
    "@fortawesome/vue-fontawesome": "^0.1.7",
    "@vue/cli": "^3.11.0",
    "@vue/cli-shared-utils": "^3.11.0",
    "auth0-js": "^9.11.3",
    "axios": "^0.18.1",
    "dotenv": "^8.1.0",
    "es6-promise": "^4.2.8",
    "jquery": "^3.4.1",
    "js-cookie": "^2.2.1",
    "popper.js": "^1.14.7",
    "register-service-worker": "^1.6.2",
    "sockjs-client": "^1.3.0",
    "vue": "^2.6.10",
    "vue-float-action-button": "^0.4.4",
    "vue-google-charts": "^0.3.2",
    "vue-plugin-load-script": "^1.2.0",
    "vue-router": "^3.0.2",
    "vuetify": "^2.1.0",
    "vuex": "^3.1.1",
    "vuex-persistedstate": "^2.5.4",
    "webstomp-client": "^1.2.6"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.4.0",
    "@vue/cli-plugin-eslint": "^3.4.0",
    "@vue/cli-plugin-pwa": "^3.11.0",
    "@vue/cli-service": "^3.5.1",
    "babel-eslint": "^10.0.1",
    "babel-plugin-module-resolver": "^3.2.0",
    "css-loader": "^2.1.1",
    "deepmerge": "^4.0.0",
    "eslint": "^5.0.0",
    "eslint-plugin-vue": "^5.2.3",
    "eslint-plugin-vuetify": "^1.0.0-beta.3",
    "fibers": "^4.0.1",
    "sass": "^1.23.0",
    "sass-loader": "^8.0.0",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "vue-cli-plugin-vuetify": "^0.5.0",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.3.0",
    "webpack": "^4.41.0"
  },

This is my vue.config.js:

module.exports = {
    css: {
      loaderOptions: {
        sass: {
          data: `@import "~@/sass/main.scss"`
        },
      },
    },
}

I have checked out and tried every solution presented in relevant issues on the developers' Github pages, but none has has any effect.

Has anyone else encountered this?

5 Answers 5

20

I had the same issue and fixed it by downgrading sass-loader by setting

"sass-loader": "7.3.1",

in package.json.

This was suggested on the Vuetify Discord

2
  • This was it, thank you. I had previously tried 7.0.0, but 7.3.1 did the trick. Oct 7, 2019 at 12:26
  • 2
    Hi! You don't need to downgrade sass-loader. Just use the new property prependData instead of data. Check this Github Issue
    – Pisandelli
    May 14, 2020 at 18:20
18

Actually you are using sass-loader 8+ and it has an option a little bit different.
Try using prependData instead of data.
Check this github issue

module.exports = {
    css: {
      loaderOptions: {
        sass: {
          prependData: `@import "~@/sass/main.scss"`
        }
      }
    }
}

4
  • 2
    I needed to add ; at the end for it to work like this: prependData: @import "~@/sass/main.scss"; Otherwise great solution.
    – Perp
    May 2, 2020 at 15:18
  • Great @Perp. I just used String Template in case somebody add more @import.
    – Pisandelli
    May 14, 2020 at 18:16
  • How do I do this with nuxt? Nov 25, 2020 at 13:23
  • Please note stackoverflow.com/a/64231359/414385 Mar 1, 2021 at 17:35
14

Update for those using version 10+. prependData is no longer valid. However you can use additionalData as a drop-in replacement.

6

Using the webpack 5.1.3 and sass-loader version 10.0.3, I had to use a different syntax (additionalData instead of prependData), as bellow:

webpack.config.js

        {
          test: /\.(css|scss|sass|less)$/,
          use: [
            'style-loader',
            'css-loader',
            'sass-loader',
            {
              loader: 'sass-loader',
              options: {
                sourceMap: true,
                additionalData: '@import "assets/scss/_variables.scss";'
                },
              },
            },
          ],
        },

Bear in mind the syntax requires the double quotes in the path and the semicolon before the end of the single quote just as if you were writing a normal scss file.

Example:

'@import "path/_file.scss";' 

In case you need to import multiple files you can use the template string symbol (``) as bellow:

        {
          test: /\.(css|scss|sass|less)$/,
          use: [
            ...
            {
              ...
              options: {
                sourceMap: true,
                additionalData: `@import "assets/scss/_variables.scss";
                                 @import "assets/scss/_mixins.scss";
                                 @import "assets/scss/_misc.scss";`
                },
              },
            },
          ],
        },

You can also take the advantage of template string as bellow:

`@import "${path.resolve(APP_DIR, '/assets/scss/')}/_variables.scss";`

Be advised: I tried this approach to reduce bundle size and the result was terrible as when you start to see what the webpack is actually doing you return to the basic import all needed styles in your main component as sass-loader will actually prepend in multiple components the styles you inform in the additional data. In my case the bundle got 3 times it's original size.

Cheers

1

If you use NUXT you should configure like this:

//nuxt.config.js
loaders: {
  less: {
    lessOptions: {
      javascriptEnabled: true,
      modifyVars: {
        'primary-color': '#5c6ac4',
        'layout-body-background': '#fff'
      }
    }
  }
}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.