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

[lanzze]

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]

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]

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

[goliafrs]

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]

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]

@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]

@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]

@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]

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

[DRBragg]

@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]

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]

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]

Solved!

[goliafrs]

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

[alvinthen]

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

[goliafrs]

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:

• you don't need install manually deepmerge, fibers, sass, sass-loader (it's already on dependencies @nuxtjs/vuetify and install automaticaly then you install this plugin)
• you don't need configure webpack for sass-loader (it's already normal configured for @nuxtjs/vuetify)
• all about how to use @nuxtjs/vuetify, you find on page plugin (thanks again @alvinthen)

[DRBragg]

@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]

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]

+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]

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

[ShlomitSibony]

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

[Redhairedgadget]

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]

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

[KaelWD]

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

[AndrewLamYW]

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

[ShlomitSibony]

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

[dcb99]

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]

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]

@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]

@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.

webpack config
main.js

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]

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]

@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]

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:

[KaelWD]

@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]

@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]

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]

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]

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

[nekosaur]

1. remove dart-sass and npm-sass packages. only sass package is needed
2. updated sass-loader to ^7.1.0

[dcb99]

@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]

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

[chenxingyu350128]

I resolve it,share my way

• I have 3 webpack files

webpack.config.js webpack.dev.js webpack.prod.js
both in webpack.config.js and webpack.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
              },
            },
          },
        ],
      },

• you see the //comment the next line？ that's the important.
• then I comment the same code above in webpack.dev.js
  now it runs

[alexpilugin]

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]

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.