'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 |
---|