Closed lanzze closed 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.
@mcfarljw I'm having the same issue but I'm not using node-sass
.
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
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
@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.
@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
@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
Oh I see, you need indentedSyntax: true
for .sass
files to work.
@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.
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.
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!
Solved!
What about the nuxt.js?
In my project i have't new Vue(...)
.
Only Vue.use(Vuetify, VUETIFY_OPTIONS)
.
@GoliafRS I managed to fix the whole issue by using https://www.npmjs.com/package/@nuxtjs/vuetify
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:
deepmerge
, fibers
, sass
, sass-loader
(it's already on dependencies @nuxtjs/vuetify
and install automaticaly then you install this plugin)sass-loader
(it's already normal configured for @nuxtjs/vuetify
)@nuxtjs/vuetify
, you find on page plugin (thanks again @alvinthen)@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.
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
=> Compiles again and the page loads without errors. Move over to fixes the deprecated components. Best wishes
+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?
You've written that you're using vue cli 2? Please upgrade to 3.
@nekosaur According to vuetify, I don't have to upgrade the vue cli, have you had the same issue?
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
}
}
]
}
],
}
Please create a minimal reproduction in a github repo so that we can troubleshoot it further.
vue-cli already has sass-loader configured, by adding that it gets run twice on each file.
Sorry, I didn't quite get the solution to the problem.
Opened a bug report: https://github.com/vuetifyjs/vuetify/issues/8320
Opened a bug report: https://github.com/vuetifyjs/vuetify/issues/8320
Apparently @johnleider thinks the FAQ will solve this problem, but it won't.
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.
@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.
@nekosaur I can't show a repo, there's too much sensitive data.
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.
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.
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.
@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"
}
});
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
mix.sass('node_modules/vuetify/src/styles/main.sass', 'public/css/main.css');
produces parsing errors like:
@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.
@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?
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.
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.
@nekosaur @KaelWD I've created a stripped down version of our project setup here
dart-sass
and npm-sass
packages. only sass
package is neededsass-loader
to ^7.1.0
@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.
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
Why are node modules so unreliable?
I fixed by replacing
import Vuetify from 'vuetify/lib'
by
import 'vuetify/dist/vuetify.min.css';
import Vuetify from 'vuetify/dist/vuetify.min';
I resolve it,share my way
webpack.config.js
webpack.dev.js
webpack.prod.js
both inwebpack.config.js
andwebpack.dev.js
, I have the same rule:{ test: /\.s(c|a)ss$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader', // Requires sass-loader@^7.0.0 // options: { // implementation: require('sass'), // fiber: require('fibers'), // indentedSyntax: true // optional // }, // Requires sass-loader@^8.0.0 options: { implementation: require('sass'), sassOptions: { fiber: require('fibers'), //comment the next line // indentedSyntax: false // optional }, }, }, ], },
//comment the next line
? that's the important.webpack.dev.js
now it runsI'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?
5th June 2021. I had the same issue. Solution:
rm -r .\node_modules\
rm -r .\package-lock.json
"sass": "1.32.13"
into package.json under devDependencies section.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.
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/