[Bug Report]Invalid CSS after " @content": expected "}", was "($material-light); "

[leapit]

Versions and Environment

Vuetify: 2.0.0-beta.0
Vue: 2.6.10
Browsers: Chrome 74.0.3729.169
OS: Mac OS 10.14.5

Steps to reproduce

Use vue create generate app,then change vuetify to 2.0.0 beta.0,below dependencies

    "core-js": "^2.6.5",
    "node-sass": "^4.12.0",
    "sass-loader": "^7.1.0",
    "vue": "^2.6.10",
    "vuetify": "^v2.0.0-beta.0"

Expected Behavior

Should show a normal index page

Actual Behavior

Show error as below

 INFO  Starting development server...
 98% after emitting CopyPlugin                                                    

 ERROR  Failed to compile with 88 errors                                                                                                                                                          4:08:53 PM

 error  in ./node_modules/vuetify/src/components/VResponsive/VResponsive.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/tam/Work/TEST/my-app/node_modules/vuetify/src/styles/tools/_theme.sass (line 3, column 5)

 @ ./node_modules/vuetify/src/components/VResponsive/VResponsive.sass 4:14-209 14:3-18:5 15:22-217
 @ ./node_modules/vuetify/lib/components/VResponsive/VResponsive.js
 @ ./node_modules/vuetify/lib/components/VResponsive/index.js
 @ ./node_modules/vuetify/lib/components/index.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./src/App.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://10.22.11.64:8080/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

.......

Reproduction Link

https://codepen.io/tabenren/pen/QRVgpY

[DRoet]

use sass instead of node-sass for 2.0

[leapit]

@DRoet yes,it works after switch sass dependence,BTW,is there any official document show must use sass for 2.0?

[DRoet]

not yet, thats why this issue got tagged with documentation I think

[kylejoeckel]

https://github.com/vuetifyjs/vuetify/releases/tag/v2.0.0-alpha.12

[leapit]

@kylejoeckel yes,hope a full upgrade guide after 2.0 release version

[leapit]

also,it seems no stylus support any more

[johnleider]

That is correct, there is no more stylus support. This is covered in the upgrade guide and will be detailed for the final release. There have been multiple sections added to the documentation where this is explained however:

https://next.vuetifyjs.com/en/getting-started/quick-start#webpack-installation
https://next.vuetifyjs.com/en/framework/a-la-carte#required-styles
https://next.vuetifyjs.com/en/framework/theme#modifying-sass-variables

As well, the vue-cli-plugin-vuetify will be updated (is currently working on dev branch) so that new installations will receive the correct dependencies.

[ibakhsh]

using sass only with laravel shows this error:

node_modules\webpack-cli\bin\cli.js:93
                                throw err;
                                ^

Error: Cannot find module 'node-sass'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:580:15)

i think laravel-mix uses node-sass so it must be installed

[VRuzhentsov]

I have success to build with this versions

{
  "devDependencies": {
    "fibers": "^4.0.2",
    "sass": "^1.25.0",
    "sass-loader": "^7.2.0"
  }
}

took from https://www.npmjs.com/package/sass-loader

readme

[johnleider]

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.

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