search

vuetifyjs / vuetify

🐉 Vue Component Framework
https://vuetifyjs.com
MIT License
39.82k stars 6.96k forks source link

[Bug Report] Cannot startup with Vuetify2.0 (Sass file error) #7950

Closed lanzze closed 5 years ago

lanzze commented 5 years ago

Environment

Vuetify Version: 2.0.0 Vue Version: 2.6.10 Browsers: Chrome 75.0.3770.142 OS: Windows 10

Steps to reproduce

We upgrade to Vuetify2.0 today, but cannot startup, because we got an error with each sass style file.

The error is: basedir=$(dirname "$(echo "$0" | sed -e 's,\,/,g')") ^^^^^^^

SyntaxError: missing ) after argument list at Module._compile (internal/modules/cjs/loader.js:718:23) at Object.Module._extensions..js (internal/modules/cjs/loader.js:785:10) at Module.load (internal/modules/cjs/loader.js:641:32) at Function.Module._load (internal/modules/cjs/loader.js:556:12) at Module.require (internal/modules/cjs/loader.js:681:19) at require (internal/modules/cjs/helpers.js:16:16) at Object.sassLoader (E:\Workspaces\Web\qian_rich_boat_web\node_modules\sass-loader\lib\loader.js:46:72)

Note:

We use stylus in project。

Expected Behavior

The sass file build success.

Actual Behavior

Build with error.

Reproduction Link

https://codepen.io/

mcfarljw commented 5 years ago

Might be related, but we also tried a dry upgrade today and were met with more than a few seemingly sass related invalid css errors. Here is a snippet:

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    @content($material-light)
   ^
      Invalid CSS after "    @content": expected "}", was "($material-light); "
      in /Users/joshua/Github/skritter-mobile-v3/node_modules/vuetify/src/styles/tools/_theme.sass (line 3, column 5)

 @ ./node_modules/vuetify/src/components/VFileInput/VFileInput.sass 4:14-208 14:3-18:5 15:22-216
 @ ./node_modules/vuetify/lib/components/VFileInput/VFileInput.js
 @ ./node_modules/vuetify/lib/components/VFileInput/index.js
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./src/plugins/vuetify.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.86.44:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VMenu/VMenu.sass

Module build failed (from ./node_modules/sass-loader/lib/loader.js):

    @content($material-light)
   ^
      Invalid CSS after "    @content": expected "}", was "($material-light); "
      in /Users/joshua/Github/skritter-mobile-v3/node_modules/vuetify/src/styles/tools/_theme.sass (line 3, column 5)

 @ ./node_modules/vuetify/src/components/VMenu/VMenu.sass 4:14-203 14:3-18:5 15:22-211
 @ ./node_modules/vuetify/lib/components/VMenu/VMenu.js
 @ ./node_modules/vuetify/lib/components/VMenu/index.js
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./src/plugins/vuetify.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://192.168.86.44:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VDivider/VDivider.sass

I looked into things a little closer and caught that sass should be used instead of node-sass which appears to have fixed the problem.

DRBragg commented 5 years ago

@mcfarljw I'm having the same issue but I'm not using node-sass.

goliafrs commented 5 years ago

I'm use nuxt.js and when i remove node-sass and install sass, other dependencies still need node-sass. I try run dev server and get next error:

Module build failed (from ./node_modules/sass-loader/lib/loader.js):                                                                                                                             friendly-errors 20:41:44  
Error: Cannot find module 'node-sass'
Require stack:
...

When i install node-sass, sass, sass-loader and all other dependencies of the world on the word sass i get next error:

Module build failed (from ./node_modules/sass-loader/lib/loader.js):                                                                                                                             friendly-errors 20:47:39  

    @content($material-light)
   ^
      Invalid CSS after "    @content": expected "}", was "($material-light); "
      in /c/gh/asiatop-frontend/node_modules/vuetify/src/styles/tools/_theme.sass (line 3, column 5)
                                                                                                                                                                                                 friendly-errors 20:47:39  
 @ ./src/assets/scss/main.scss 4:14-235 14:3-18:5 15:22-243
 @ ./.nuxt/App.js
 @ ./.nuxt/index.js
 @ ./.nuxt/client.js
 @ multi eventsource-polyfill webpack-hot-middleware/client?reload=true&timeout=30000&ansiColors=&overlayStyles=&name=client&path=/__webpack_hmr/client ./.nuxt/client.js

And yes, i have in devDependencies fibers and deepmerge.

P.S. Here

npm install sass sass-loader fibers deepmerge --dev

This command dose not install packages to devDependencies. I use this:

npm i -D sass sass-loader fibers deepmerge
DRBragg commented 5 years ago

I was able to fix the issue @mcfarljw and GoliafRS referenced by adding this to my Webpack config:

{
  test: /\.s(c|a)ss$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        implementation: require('sass'),
        fiber: require('fibers'),
        indentedSyntax: false
      }
    }
  ]
}

unfortunately now I'm getting a different error:

./node_modules/vuetify/src/components/VInput/VInput.sass (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js??ref--8-2!./node_modules/vuetify/src/components/VInput/VInput.sass)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

/* Theme */
          ^
      Expected ";".
  ╷
3 │ /* Theme */
  │            ^
  ╵
  stdin 3:12  root stylesheet
      in /Users/drewbragg/Documents/speaker_resource_center/node_modules/vuetify/src/components/VInput/VInput.sass (line 3, column 12)

And I'm having a lot more trouble finding any reference to this issue

mcfarljw commented 5 years ago

@GoliafRS it appears that npm install sass --dev is a typo in the docs and should actually be npm install sass --save-dev.

@DRBragg interesting to know, I totally forgot about the webpack config using the vue-cli since we've not had to update configurations in awhile. I'll have to give that a shot when I get a chance if this hasn't been resolved by then.

KaelWD commented 5 years ago

@GoliafRS don't install node-sass at all, sass-loader will prioritise it over sass

@DRBragg you're adding another rule to the existing ones, so the files are run through sass-loader twice nuxt: https://nuxtjs.org/api/configuration-build#loaders vue-cli: https://cli.vuejs.org/config/#css-loaderoptions

DRBragg commented 5 years ago

@KaelWD I didn't have a sass-loader rule prior to adding the one I found here

FWIW I'm not using the vue-cli

KaelWD commented 5 years ago

Oh I see, you need indentedSyntax: true for .sass files to work.

DRBragg commented 5 years ago

@KaelWD Ah, I see. I was hoping to avoid that since it breaks our existing scss files. Thanks for the heads up. I'll figure out what we're going to do with this new information.

KaelWD commented 5 years ago

You might need a rule with true for .sass and another with false for .scss, idk haven't really done much vanilla webpack stuff lately.

lanzze commented 5 years ago

We solved this problem with an new way by official code!

At Vuetify 1.15.x, we do this：

import Vuetify, then Vue.use(Vuetify,options). Just it!!!

But in 2.0.x, you need this:

A: import Vuetify, then Vue.use(Vuetify,{components,directives}); B: Create a new Vuetify object, like: let vuetify = new Vuetify({ icons: { iconfont: 'mdi' }, theme: theme })

C: Put vuetify object into Vue root object, like:

new Vue({ vuetify, el: "#app", render: (H) => H(App), }); Come on~~This is noword!

lanzze commented 5 years ago

Solved!

goliafrs commented 5 years ago

What about the nuxt.js? In my project i have't new Vue(...). Only Vue.use(Vuetify, VUETIFY_OPTIONS).

alvinthen commented 5 years ago

@GoliafRS I managed to fix the whole issue by using https://www.npmjs.com/package/@nuxtjs/vuetify

goliafrs commented 5 years ago

My English level does not give me the opportunity to convey how much I am disappointed in the vuetify...

@alvinthen, thank you very much.

For users who also use nuxt & @nuxtjs/vuetify as plugin like and me:

DRBragg commented 5 years ago

@KaelWD I just wanted to circle back to this real quick and let you know that I was able to solve my issue by omitting the indentSyntax flag completely.

When set to true it breaks all my scss files but when set to false none of your sass files load correctly. I was digging through the docs for node-sass (yes, I know that's not the library we use but it shares a lot of options and is slightly better documented) and found this:

Note: node-sass/libsass will compile a mixed library of scss and indented syntax (.sass) files with the Default setting (false) as long as .sass and .scss extensions are used in filenames.

The way they worded 'Default setting' got me thinking and when I omitted the option all together both files load correctly and I'm able to use the vuetify-loader.

my final sass-loader rule looks like this:

{
  test: /\.s(c|a)ss$/,
  use: [
    'vue-style-loader',
    'css-loader',
    {
      loader: 'sass-loader',
      options: {
        implementation: require('sass'),
        fiber: require('fibers')
      }
    }
  ]
}

I don't know if any of this matters to you but maybe it will help someone else with this problem.

Thanks for all your hard work on Vuetify. It is really wonderful.

meschg commented 5 years ago

Hello, I am not completely sure how everything works but i did the following and got the same error trying to update from Vuetify 1.5.16 -> 2.0.4

  1. npm uninstall vue-cli-plugin-vuetify vuetify with older version
  2. install using vue-cli: vue-cli-plugin-vuetify
  3. run recommended config during installation
  4. Auto/Manually Added npm packages: sass, sass-loader, vuetify
  5. Fixing the changed files using git :)

=> Compiles again and the page loads without errors. Move over to fixes the deprecated components. Best wishes

ShlomitSibony commented 5 years ago

+1 I have troubles getting any reference to this issue @DRBragg unfortunately your solution didn't solve my issue

I'm getting the error "Expected '{'" or "expected newline" too many times, example:

error  in ./node_modules/vuetify/src/components/VCounter/VCounter.sass
Module build failed (from ../node_modules/sass-loader/lib/loader.js):
undefined
Expected newline.
var content = require("!!../../../../css-loader/index.js!../../../../sass-loader/lib/loader.js??ref--14-2!./VCounter.sass");

stdin 5:124  root stylesheet
in C:\Users\ssibony\Desktop\WORK\Vue Projects\checklist\node_modules\vuetify\src\components\VCounter\VCounter.sass (line 5, column 124)

I'm using vue 2.6.10, vuetify 2.0.3, @vue/cli 2 in vue.config.js under configureWebpack I've added:

module: {
        rules: [
          {
            test: /\.s(c|a)ss$/,
            use : [
              'vue-style-loader',
              'css-loader',
              {
                loader : 'sass-loader',
                options: {
                  implementation: require('sass'),
                  fiber: require('fibers')
                }
              }
            ]
          }
        ]
      }

I've also defined the other vue.config.js sections according to single file component here

Any suggestions?

nekosaur commented 5 years ago

You've written that you're using vue cli 2? Please upgrade to 3.

ShlomitSibony commented 5 years ago

@nekosaur According to vuetify, I don't have to upgrade the vue cli, have you had the same issue?

Redhairedgadget commented 5 years ago

Same issue, error with each sass style file. Vue CLI 3, in vue.config.js added this under configureWebpack: 

module:{
            rules: [
                {
                    test: /\.s(c|a)ss$/,
                    use: [
                        'vue-style-loader',
                        'css-loader',
                        {
                            loader: 'sass-loader',
                            options: {
                                implementation: require('sass'),
                                fiber: require('fibers'),
                                indentedSyntax: true // optional
                            }
                        }
                    ]
                }
                ],
        }
nekosaur commented 5 years ago

Please create a minimal reproduction in a github repo so that we can troubleshoot it further.

KaelWD commented 5 years ago

vue-cli already has sass-loader configured, by adding that it gets run twice on each file.

AndrewLamYW commented 5 years ago

Sorry, I didn't quite get the solution to the problem.

ShlomitSibony commented 5 years ago

Opened a bug report: https://github.com/vuetifyjs/vuetify/issues/8320

dcb99 commented 5 years ago

Opened a bug report: https://github.com/vuetifyjs/vuetify/issues/8320

Apparently @johnleider thinks the FAQ will solve this problem, but it won't.

dcb99 commented 5 years ago

vue-cli already has sass-loader configured, by adding that it gets run twice on each file.

@KaelWD that's great to point out for those using vue-cli, but I'm not, and not everyone does. But by all means, please continue being snarky and unhelpful.

nekosaur commented 5 years ago

@dcb99 so what does your project setup look like? can you show a github repo, or post your webpack config and main entrypoint file to pastebin? What are the error messages you get? It is very hard to give any sort of advice without knowing what is wrong or what you are working with.

dcb99 commented 5 years ago

@nekosaur I can't show a repo, there's too much sensitive data.
error There's about 100 more of those errors ^^^ We've got a .net core back end serving a vue front end built with vuetify. We've had zero issues with 1.5.

webpack config main.js

stutter On a related note, Did I stutter? is completely unprofessional and unhelpful from @KaelWD. It's hard to believe that someone would be brazen enough to post a reply like that to people who have legit issues.

nekosaur commented 5 years ago

So a couple of things.

First, if you are using vuetify-loader (and importing from vuetify/lib which I assume), then you should not import the full minified css.

Second, I know you have specified the sass implementation in webpack config, but make sure that node-sass is still not installed. The errors does suggest that it's still using node-sass. Perhaps just nuke node_modules and run npm/yarn again.

Third, for the hell of it, try adding indentedSyntax: true to sass-loader options and see if it makes any difference.

dcb99 commented 5 years ago

@nekosaur Thanks for the reply. If I don't import the minified CSS, I have zero styling. I definitely don't have node-sass, and have already nuked node_modules and reinstalled, but I'll do it again just for funsies. I've also tried running with and without indentedSyntax: true with the same result. The dev console is also giving me and error that is saying Vuetify is not properly initialized. This is my vuetify.js:

import Vue from "vue";
import Vuetify from "vuetify/lib";

Vue.use(Vuetify);

export default new Vuetify({
  icons: {
    iconfont: "mdi"
  }
});
rvulpescu commented 5 years ago

Using webpack directly or with laravel-mix, seems to cause parsing problems too.

Using previous version, the stylus loading and variable overloading worked without any problems by simple adding the stylus loader package.

There parser seems confused about how to manage the code. It's parsing everything as sass. If I run without the custom loader setup, then vuetify code is simply ignored.

I limited the scope of the loader to just node_modules to test as otherwise there would be issues with extracting CSS code from .vue files too.

Using image

mix.sass('node_modules/vuetify/src/styles/main.sass', 'public/css/main.css');

produces parsing errors like:

image

KaelWD commented 5 years ago

@dcb99 Your main.js shouldn't have Vue.use(Vuetify) again, and new Vue({ vuetify }) has to be lowercase. The Invalid CSS after " error is caused by having an older version of the sass compiler, currently we only support dart-sass ^1.15.0

@rvulpescu As above, that message means it's being run through sass-loader twice. I don't know enough about laravel mix to help with that.

dcb99 commented 5 years ago

@KaelWD I've removed Vue.use(Vuetify) from main.js, changed vuetify to lower case but it hasn't fixed anything. I don't use sass at all so I haven't specified a sass compiler in package.json. Do I need to have dart-sass?

KaelWD commented 5 years ago

With a-la-carte (vuetify/lib), yes. Whatever build system you're using seems to already have one configured, probably node-sass - which is hella outdated.

dcb99 commented 5 years ago

With a-la-carte (vuetify/lib), yes. Whatever build system you're using seems to already have one configured, probably node-sass - which is hella outdated.

I'm using webpack. If you looked at my webpack config file, you'd see there's no reference to node-sass anywhere.

dcb99 commented 5 years ago

@nekosaur @KaelWD I've created a stripped down version of our project setup here

nekosaur commented 5 years ago
  1. remove dart-sass and npm-sass packages. only sass package is needed
  2. updated sass-loader to ^7.1.0
dcb99 commented 5 years ago

@nekosaur thanks, that seems to have done the trick, or at least moved things in the right direction, but now I'm getting errors about components not being defined.

klaveren commented 5 years ago

To update Vuetify 1.X.X to Vuetify 2.X.X in Nuxtjs, remove the following dependencies from your project:

npm uninstall @nuxtjs/vuetify vuetify vuetify-loader node-sass sass-loader

then install vuetify again npm ininstall @nuxtjs/vuetify

** Note that Vuetify 1.5.x is handled by @nuxtjs/vuetify@0.x.x Meanwhile Vuetify 2.x.x is now handled by the last versions of the module : @nuxtjs/vuetify@1.x.x

In your nuxt.config.js, remove vuetify plugin line:

plugins: [
    // { src: '~/plugins/vuetify' }
  ],

and then create a new section called buildModules.

  buildModules: [
    // Simple usage
    '@nuxtjs/vuetify',

    // With options
    ['@nuxtjs/vuetify', { /* module options */ }]
  ]

I found this solution reading this two resources: https://github.com/nuxt-community/vuetify-module/blob/master/MIGRATION_GUIDE.md https://www.npmjs.com/package/@nuxtjs/vuetify

jackmahoney commented 5 years ago

Why are node modules so unreliable?

gustawdaniel commented 4 years ago

I fixed by replacing

import Vuetify from 'vuetify/lib'

by

import 'vuetify/dist/vuetify.min.css';
import Vuetify from 'vuetify/dist/vuetify.min';
chenxingyu350128 commented 4 years ago

I resolve it,share my way

vegerot commented 4 years ago

I'm writing a wrapper component for v-select. I want to add an additional default property to menuProps, so I have something like

import { defaultMenuProps } from 'vuetify/lib/components/VSelect/VSelect';

const StyledSelectField = {
  name: 'StyledSelectField',
  props: {
    hideDetails: {
      default: true,
      type: Boolean,
    },
    menuProps: {
      default: () => ({ offsetY: true, ...defaultMenuProps }),
      type: [String, Array, Object],

    },

But when I do this I get a million errors like

 ERROR  Failed to compile with 22 errors                                                              8:06:25 PM

 error  in ./node_modules/vuetify/src/components/VAvatar/VAvatar.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VAvatar/_variables.scss
        from line 1 of node_modules/vuetify/src/components/VAvatar/VAvatar.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VAvatar/VAvatar.sass 4:14-206 14:3-18:5 15:22-214
 @ ./node_modules/vuetify/lib/components/VAvatar/VAvatar.js
 @ ./node_modules/vuetify/lib/components/VAvatar/index.js
 @ ./node_modules/vuetify/lib/components/VList/VListItemAvatar.js
 @ ./node_modules/vuetify/lib/components/VList/index.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelectList.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VChip/VChip.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VChip/_variables.scss
        from line 2 of node_modules/vuetify/src/components/VChip/VChip.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VChip/VChip.sass 4:14-204 14:3-18:5 15:22-212
 @ ./node_modules/vuetify/lib/components/VChip/VChip.js
 @ ./node_modules/vuetify/lib/components/VChip/index.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VCounter/VCounter.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VCounter/_variables.scss
        from line 1 of node_modules/vuetify/src/components/VCounter/VCounter.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VCounter/VCounter.sass 4:14-207 14:3-18:5 15:22-215
 @ ./node_modules/vuetify/lib/components/VCounter/VCounter.js
 @ ./node_modules/vuetify/lib/components/VCounter/index.js
 @ ./node_modules/vuetify/lib/components/VTextField/VTextField.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VDivider/VDivider.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VDivider/_variables.scss
        from line 1 of node_modules/vuetify/src/components/VDivider/VDivider.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VDivider/VDivider.sass 4:14-207 14:3-18:5 15:22-215
 @ ./node_modules/vuetify/lib/components/VDivider/VDivider.js
 @ ./node_modules/vuetify/lib/components/VDivider/index.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelectList.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VIcon/VIcon.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VIcon/_variables.scss
        from line 2 of node_modules/vuetify/src/components/VIcon/VIcon.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VIcon/VIcon.sass 4:14-204 14:3-18:5 15:22-212
 @ ./node_modules/vuetify/lib/components/VIcon/VIcon.js
 @ ./node_modules/vuetify/lib/components/VIcon/index.js
 @ ./node_modules/vuetify/lib/components/VCheckbox/VSimpleCheckbox.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelectList.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VInput/VInput.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VInput/_variables.scss
        from line 1 of node_modules/vuetify/src/components/VInput/VInput.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VInput/VInput.sass 4:14-205 14:3-18:5 15:22-213
 @ ./node_modules/vuetify/lib/components/VInput/VInput.js
 @ ./node_modules/vuetify/lib/components/VInput/index.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VItemGroup/VItemGroup.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VItemGroup/_variables.scss
        from line 1 of node_modules/vuetify/src/components/VItemGroup/VItemGroup.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VItemGroup/VItemGroup.sass 4:14-209 14:3-18:5 15:22-217
 @ ./node_modules/vuetify/lib/components/VItemGroup/VItemGroup.js
 @ ./node_modules/vuetify/lib/components/VList/VListItemGroup.js
 @ ./node_modules/vuetify/lib/components/VList/index.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelectList.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VLabel/VLabel.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VLabel/_variables.scss
        from line 1 of node_modules/vuetify/src/components/VLabel/VLabel.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VLabel/VLabel.sass 4:14-205 14:3-18:5 15:22-213
 @ ./node_modules/vuetify/lib/components/VLabel/VLabel.js
 @ ./node_modules/vuetify/lib/components/VLabel/index.js
 @ ./node_modules/vuetify/lib/components/VTextField/VTextField.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VList/VList.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VList/_variables.scss
        from line 1 of node_modules/vuetify/src/components/VList/VList.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VList/VList.sass 4:14-204 14:3-18:5 15:22-212
 @ ./node_modules/vuetify/lib/components/VList/VList.js
 @ ./node_modules/vuetify/lib/components/VList/index.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelectList.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VList/VListGroup.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VList/_variables.scss
        from line 1 of node_modules/vuetify/src/components/VList/VListGroup.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VList/VListGroup.sass 4:14-209 14:3-18:5 15:22-217
 @ ./node_modules/vuetify/lib/components/VList/VListGroup.js
 @ ./node_modules/vuetify/lib/components/VList/index.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelectList.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VList/VListItem.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VList/_variables.scss
        from line 1 of node_modules/vuetify/src/components/VList/VListItem.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VList/VListItem.sass 4:14-208 14:3-18:5 15:22-216
 @ ./node_modules/vuetify/lib/components/VList/VListItem.js
 @ ./node_modules/vuetify/lib/components/VList/index.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelectList.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VList/VListItemGroup.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VList/_variables.scss
        from line 1 of node_modules/vuetify/src/components/VList/VListItemGroup.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VList/VListItemGroup.sass 4:14-213 14:3-18:5 15:22-221
 @ ./node_modules/vuetify/lib/components/VList/VListItemGroup.js
 @ ./node_modules/vuetify/lib/components/VList/index.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelectList.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VMenu/VMenu.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VMenu/_variables.scss
        from line 1 of node_modules/vuetify/src/components/VMenu/VMenu.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VMenu/VMenu.sass 4:14-204 14:3-18:5 15:22-212
 @ ./node_modules/vuetify/lib/components/VMenu/VMenu.js
 @ ./node_modules/vuetify/lib/components/VMenu/index.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VMessages/VMessages.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VMessages/_variables.scss
        from line 1 of node_modules/vuetify/src/components/VMessages/VMessages.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VMessages/VMessages.sass 4:14-208 14:3-18:5 15:22-216
 @ ./node_modules/vuetify/lib/components/VMessages/VMessages.js
 @ ./node_modules/vuetify/lib/components/VMessages/index.js
 @ ./node_modules/vuetify/lib/components/VInput/VInput.js
 @ ./node_modules/vuetify/lib/components/VInput/index.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VProgressLinear/VProgressLinear.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VProgressLinear/_variables.scss
        from line 1 of node_modules/vuetify/src/components/VProgressLinear/VProgressLinear.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VProgressLinear/VProgressLinear.sass 4:14-214 14:3-18:5 15:22-222
 @ ./node_modules/vuetify/lib/components/VProgressLinear/VProgressLinear.js
 @ ./node_modules/vuetify/lib/components/VProgressLinear/index.js
 @ ./node_modules/vuetify/lib/mixins/loadable/index.js
 @ ./node_modules/vuetify/lib/components/VTextField/VTextField.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VSelect/VSelect.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VSelect/_variables.scss
        from line 1 of node_modules/vuetify/src/components/VSelect/VSelect.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VSelect/VSelect.sass 4:14-206 14:3-18:5 15:22-214
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VSheet/VSheet.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VSheet/_variables.scss
        from line 2 of node_modules/vuetify/src/components/VSheet/VSheet.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VSheet/VSheet.sass 4:14-205 14:3-18:5 15:22-213
 @ ./node_modules/vuetify/lib/components/VSheet/VSheet.js
 @ ./node_modules/vuetify/lib/components/VList/VList.js
 @ ./node_modules/vuetify/lib/components/VList/index.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelectList.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VSubheader/VSubheader.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VSubheader/_variables.scss
        from line 1 of node_modules/vuetify/src/components/VSubheader/VSubheader.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VSubheader/VSubheader.sass 4:14-209 14:3-18:5 15:22-217
 @ ./node_modules/vuetify/lib/components/VSubheader/VSubheader.js
 @ ./node_modules/vuetify/lib/components/VSubheader/index.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelectList.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VTextField/VTextField.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/components/VTextField/_variables.scss
        from line 2 of node_modules/vuetify/src/components/VTextField/VTextField.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VTextField/VTextField.sass 4:14-209 14:3-18:5 15:22-217
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/directives/ripple/VRipple.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 1 of node_modules/vuetify/src/directives/ripple/_variables.scss
        from line 1 of node_modules/vuetify/src/directives/ripple/VRipple.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/directives/ripple/VRipple.sass 4:14-206 14:3-18:5 15:22-214
 @ ./node_modules/vuetify/lib/directives/ripple/index.js
 @ ./node_modules/vuetify/lib/components/VTextField/VTextField.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

 error  in ./node_modules/vuetify/src/components/VCheckbox/VSimpleCheckbox.sass

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 1 of node_modules/vuetify/src/styles/styles.sass
        from line 2 of node_modules/vuetify/src/components/VCheckbox/VSimpleCheckbox.sass
>>     @content($material-light); }

   ----^

 @ ./node_modules/vuetify/src/components/VCheckbox/VSimpleCheckbox.sass 4:14-214 14:3-18:5 15:22-222
 @ ./node_modules/vuetify/lib/components/VCheckbox/VSimpleCheckbox.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelectList.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

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

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Invalid CSS after "    @content": expected "}", was "($material-light); "
        on line 3 of node_modules/vuetify/src/styles/tools/_theme.sass
        from line 8 of node_modules/vuetify/src/styles/tools/_index.sass
        from line 3 of node_modules/vuetify/src/styles/main.sass
>>     @content($material-light); }

   ----^

 @ ./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/util/console.js
 @ ./node_modules/vuetify/lib/components/VSelect/VSelect.js
 @ ./node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/babel-loader/lib!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue?vue&type=script&lang=js&
 @ ./src/components/core/StyledSelectField.vue
 @ ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue?vue&type=script&lang=ts&
 @ ./src/components/wing-preferences/Gos.vue
 @ ./src/router/router-index.ts
 @ ./src/main.ts
 @ multi (webpack)-dev-server/client?http://10.0.0.4:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.ts

I literally just want this one object. What do I do?

alexpilugin commented 3 years ago

5th June 2021. I had the same issue. Solution:

  1. Remove node_modules rm -r .\node_modules\
  2. Remove package-lock.json rm -r .\package-lock.json
  3. Add one line "sass": "1.32.13" into package.json under devDependencies section.
johnleider commented 3 years ago

We kindly ask users to not comment on closed/resolved issues. If you believe that this issue has not been correctly resolved, please create a new issue showing the regression or create a new discussion.

If you have any questions, please reach out to us in our Discord community.