'How to setup vuetify with vuetify-loader

I'm getting the error below when I run yarn serve:

ERROR  Failed to compile with 1 errors                                                  4:03:58 p.m.

 error  in ./node_modules/vuetify/src/styles/main.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected identifier.
   ╷
34 │         .v-application .red.#ef4321{
   │                             ^
   ╵
  node_modules/vuetify/src/styles/generic/_colors.scss 34:29  @import
  node_modules/vuetify/src/styles/generic/_index.scss 2:9     @import
  /Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/vuetify/src/styles/main.sass 6:9                                                   root stylesheet

 @ ./node_modules/vuetify/src/styles/main.sass 4:14-194 14:3-18:5 15:22-202
 @ ./node_modules/vuetify/lib/presets/default/index.js
 @ ./node_modules/vuetify/lib/services/presets/index.js
 @ ./node_modules/vuetify/lib/services/index.js
 @ ./node_modules/vuetify/lib/framework.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./src/plugins/vuetify.js
 @ ./src/main.js
 @ ./src/entry-client.js
 @ multi webpack-hot-middleware/client ./src/entry-client

Client errors
./node_modules/vuetify/src/styles/main.sass (./node_modules/css-loader/dist/cjs.js??ref--9-oneOf-3-1!./node_modules/postcss-loader/src??ref--9-oneOf-3-2!./node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-3-3!./node_modules/vuetify/src/styles/main.sass)
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Expected identifier.
   ╷
34 │         .v-application .red.#ef4321{
   │                             ^
   ╵
  node_modules/vuetify/src/styles/generic/_colors.scss 34:29  @import
  node_modules/vuetify/src/styles/generic/_index.scss 2:9     @import
  /Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/vuetify/src/styles/main.sass 6:9                                                   root stylesheet
SassError: SassError: Expected identifier.
   ╷
34 │         .v-application .red.#ef4321{
   │                             ^
   ╵
  node_modules/vuetify/src/styles/generic/_colors.scss 34:29  @import
  node_modules/vuetify/src/styles/generic/_index.scss 2:9     @import
  /Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/vuetify/src/styles/main.sass 6:9                                                   root stylesheet
    at /Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass-loader/dist/index.js:73:16
    at Function.call$2 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:88152:16)
    at _render_closure1.call$2 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:77577:12)
    at _RootZone.runBinary$3$3 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:26142:18)
    at _RootZone.runBinary$3 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:26146:19)
    at _FutureListener.handleError$1 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24590:19)
    at _Future__propagateToListeners_handleError.call$0 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24887:40)
    at Object._Future__propagateToListeners (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:4311:88)
    at _Future._completeError$2 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24715:9)
    at _AsyncAwaitCompleter.completeError$2 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24107:12)
    at Object._asyncRethrow (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:4065:17)
    at /Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:14085:20
    at _wrapJsFunctionForAsync_closure.$protected (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:4090:15)
    at _wrapJsFunctionForAsync_closure.call$2 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24128:12)
    at _awaitOnObject_closure0.call$2 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24120:25)
    at _RootZone.runBinary$3$3 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:26142:18)
    at _RootZone.runBinary$3 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:26146:19)
    at _FutureListener.handleError$1 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24590:19)
    at _Future__propagateToListeners_handleError.call$0 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24887:40)
    at Object._Future__propagateToListeners (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:4311:88)
    at _Future._completeError$2 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24715:9)
    at _AsyncAwaitCompleter.completeError$2 (/Users/markshaio/Desktop/Sirius/SRS-772-new/sirius_02/node_modules/sass/sass.dart.js:24107:12)
 @ ./node_modules/vuetify/src/styles/main.sass 4:14-194 14:3-18:5 15:22-202
 @ ./node_modules/vuetify/lib/presets/default/index.js
 @ ./node_modules/vuetify/lib/services/presets/index.js
 @ ./node_modules/vuetify/lib/services/index.js
 @ ./node_modules/vuetify/lib/framework.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./src/plugins/vuetify.js
 @ ./src/main.js
 @ ./src/entry-client.js
 @ multi webpack-hot-middleware/client ./src/entry-client
webpack built 3690c6dc81708ab4b923 in 2915ms

I believe it has to do with vuetify-loader setup with Vuetify but I'm not sure what I'm doing wrong here. I've setup vuetify using webpack as specified here: https://vuetifyjs.com/en/getting-started/installation/#webpack-install

I also tried to modify webpack.config.js to match what is shown by the vuetify-loader docs: https://github.com/vuetifyjs/vuetify-loader,

const { VuetifyLoaderPlugin } = require('vuetify-loader')

exports.plugins.push(
  new VuetifyLoaderPlugin()
)

However I'm not having any luck. I know I can also do the installation other ways but the reason I'm using the vuetify-loader is because I need to import specific vuetify components such that the vuetify styling doesn't break the styling of an existing project.



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source