How to setup vuetify with vuetify-loader

Question

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.

sounds like you need to start thinking about refactoring :) btw.. did you try to remove the dot? `.v-application .red.#ef4321{` the one between red and # — Mr.P, May 29 '22 at 15:46
No I gave up sadly, I ended up just making the component I wanted. — Mark, May 30 '22 at 15:30

How to setup vuetify with vuetify-loader

0 Answers0