Laravel-mix: Vuetify 2 sass compile error

[manrix]

• Laravel Mix Version: 4.1.2
• Node Version: 10.16
• NPM Version: 6.9.0
• OS: Windows 10

Description:

When i try to compile vuetify 2 i get this error:

ERROR in ./node_modules/vuetify/src/styles/main.sass (./node_modules/css-loader!./node_modules/postcss-loader/src??ref--7-2!./node_modules/sass-loader/lib/loader.js??ref--7-3!./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js??ref--10-2!./node_modules/vuetify/src/styles/main.sass)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
                                                                                                                ^
      Expected newline.
  ╷
4 │ var content = require("!!../../../css-loader/index.js!../../../sass-loader/lib/loader.js??ref--10-2!./main.sass");
  │                                                                                                                  ^
  ╵
  stdin 4:114  root stylesheet
      in C:\xampp72\htdocs\testvuetify\node_modules\vuetify\src\styles\main.sass (line 4, column 114)
 @ ./node_modules/vuetify/src/styles/main.sass 2:14-269
 @ ./node_modules/vuetify/lib/framework.js
 @ ./node_modules/vuetify/lib/index.js
 @ ./app.js
 @ multi ./app.js

Steps To Reproduce:

Create a simple vuetify app:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify()

and try to compile it.

I asked on laracasts too, https://laracasts.com/discuss/channels/elixir/vuetify-sass-compile-error-with-laravel-mix.

[saibotk]

Hey,

that is a problem similar to the one, i had tonight and got finally fixed now
after many hours and the solution is "pretty" simple.

But keep in mind, that this is not a Laravel Mix bug.

First, you will need to understand, how Mix works, eg. it will add some predefined rules / webpack configs.
Secondly, webpack's rules usually match based on a RegEx, and it will execute all rules. Big note on the ALL here, so no "matching the most specific rule only", as i thought earlier.

So as the error suggests, the sass-loader got some input, which as we can see in your logs, is already processed (it already contains javascript instructions), and suddenly finds some instructions, it cannot handle (var content = ....). So that is what the error is all about.

How to fix your webpack config:

Mix adds rules matching all .sass and .scss files, by default.
So you can either remove the custom rule you found on the vuetify documentation (and you may need to adjust some configs, but it should work out-of-the-box),
or
you will need to exclude the vuetify folder from the default rules, like so:

Mix.listen('configReady', webpackConfig => {
  // Exclude vuetify folder from default sass/scss rules
  const sassConfig = webpackConfig.module.rules.find(
    rule =>
      String(rule.test) ===
      String(/\.sass$/)
  );

  const scssConfig = webpackConfig.module.rules.find(
    rule =>
      String(rule.test) ===
      String(/\.scss$/)
  );

  sassConfig.exclude.push(path.resolve(__dirname, 'node_modules/vuetify'))
  scssConfig.exclude.push(path.resolve(__dirname, 'node_modules/vuetify'))

Which is, what i did, to also apply some custom PostCSS settings (parent prefixing, to restrict vuetify css, to only be valid inside a specific parent css identifier :) )

_Side note: Then you would need to separate rules for .scss and .sass since sass-loader has an option called, indentedSyntax which has to be true for sass files and false for scss files._

I hope this explanation is helpful, as it would have been for me before researching for hours. :+1:

[pawel-marciniak]

@saibotk have you got any idea how to overwrite Vuetify 2.0 variables with Laravel Mix? https://vuetifyjs.com/en/customization/sass-variables - original documentation is for vue-cli application and I haven't got any luck yet in implementing it in mix configuration :/

[saibotk]

@saibotk have you got any idea how to overwrite Vuetify 2.0 variables with Laravel Mix? https://vuetifyjs.com/en/customization/sass-variables - original documentation is for vue-cli application and I haven't got any luck yet in implementing it in mix configuration :/

You could either add the vuetify sass import to your own sass files and then do what you want there (you then also would have to change the vuetify import (vuetify\lib automatically includes the main sass file!), to only import the components
or
you would have to add the data option to the sass-loader like so (pretty similar to the documentation):

{
  loader: "sass-loader",
  options: {
    data: "@import "~@/sass/main.scss"
  }
}

But since i did not do that yet, i cannot be sure about it, i hope i could still help you out. :+1:

[pawel-marciniak]

I tried this second approach, but I use scss in my single file components and have some conflicts because of that, but this first idea sounds good, I didn't tried manual import of sass file, thanks :)

[manrix]

@saibotk, your solution worked. Here is the mix configuration:

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

Mix.listen('configReady', webpackConfig => {
  // Exclude vuetify folder from default sass/scss rules
  const sassConfig = webpackConfig.module.rules.find(
    rule =>
      String(rule.test) ===
      String(/\.sass$/)
  );

  const scssConfig = webpackConfig.module.rules.find(
    rule =>
      String(rule.test) ===
      String(/\.scss$/)
  );

  sassConfig.exclude.push(path.resolve(__dirname, 'node_modules/vuetify'))
  scssConfig.exclude.push(path.resolve(__dirname, 'node_modules/vuetify'))
});

mix.js('app.js', 'dist/js');

Thanks.

[saibotk]

Glad i could help :) @manrix

[neovive]

Thanks for sharing. I've been struggling with this for the past few days. My apologies upfront for asking, but would it possible to post a basic repo with a working example of Laravel 5.8 using Vuetify with Sass variable customizations? Once complete, I'm hoping to document the process for the Vuetify team in hope of adding a Laravel + Vuetify section to the Vuetify docs. It's pretty complex for those without deep webpack knowledge, but it's such a powerful combination if we can get it working. Thank you again for your time.

[saibotk]

I thought about writing a small Mix addon, to do all the steps and be configurable, but this could take some time. Because i don't like these example repos, since they are mostly outdated too soon and usually requires time to extract only the small information, one really needs.

[neovive]

I agree that the repos get outdated quick, especially all the 1.x templates out there. But I do think a 2.x repo right now would be a useful scaffold for many of us that just a need a starting point. I'm hoping it's not a major effort, since I already feel bad asking. If there is anything I can do assist, let me know. I was hoping to document the process, but it was much more complicated than I anticipated and I haven't been able to get a stable example running. Thanks again for your direction thus far.

[xitox97]

@manrix Hi, can you give step by step to install vuetify in laravel? I kind of stuck here

[manrix]

@xitox97 where are you stuck ? I use the configuration posted above with laravel-mix.

[xitox97]

@xitox97 where are you stuck ? I use the configuration posted above with laravel-mix.

@manrix , Here my steps:

1. npm install vuetify --save
2. adding this in app.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify()

1. Add this in app.scss
   @import '~vuetify/dist/vuetify.min.css';
2. Add your configuration in webpack.mix.js
3. run npm run dev

and I got this error

Error: Cannot find module 'fibers'
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:613:15)
    at Function.Module._load (internal/modules/cjs/loader.js:539:25)
    at Module.require (internal/modules/cjs/loader.js:667:17)
    at require (C:\laragon\www\teamfinder\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (C:\laragon\www\teamfinder\webpack.mix.js:25:12)
    at Module._compile (C:\laragon\www\teamfinder\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10)
    at Module.load (internal/modules/cjs/loader.js:630:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:570:12)
    at Function.Module._load (internal/modules/cjs/loader.js:562:3)
    at Module.require (internal/modules/cjs/loader.js:667:17)
    at require (C:\laragon\www\teamfinder\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at Object.<anonymous> (C:\laragon\www\teamfinder\node_modules\laravel-mix\setup\webpack.config.js:12:1)
    at Module._compile (C:\laragon\www\teamfinder\node_modules\v8-compile-cache\v8-compile-cache.js:192:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10)
    at Module.load (internal/modules/cjs/loader.js:630:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:570:12)
    at Function.Module._load (internal/modules/cjs/loader.js:562:3)
    at Module.require (internal/modules/cjs/loader.js:667:17)
    at require (C:\laragon\www\teamfinder\node_modules\v8-compile-cache\v8-compile-cache.js:161:20)
    at WEBPACK_OPTIONS (C:\laragon\www\teamfinder\node_modules\webpack-cli\bin\utils\convert-argv.js:116:13)
    at requireConfig (C:\laragon\www\teamfinder\node_modules\webpack-cli\bin\utils\convert-argv.js:118:6)
    at C:\laragon\www\teamfinder\node_modules\webpack-cli\bin\utils\convert-argv.js:125:17
    at Array.forEach (<anonymous>)
    at module.exports (C:\laragon\www\teamfinder\node_modules\webpack-cli\bin\utils\convert-argv.js:123:15)
    at yargs.parse (C:\laragon\www\teamfinder\node_modules\webpack-cli\bin\cli.js:71:45)
    at Object.parse (C:\laragon\www\teamfinder\node_modules\webpack-cli\node_modules\yargs\yargs.js:567:18)
    at C:\laragon\www\teamfinder\node_modules\webpack-cli\bin\cli.js:49:8
    at Object.<anonymous> (C:\laragon\www\teamfinder\node_modules\webpack-cli\bin\cli.js:365:3)
    at Module._compile (internal/modules/cjs/loader.js:738:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:749:10)
    at Module.load (internal/modules/cjs/loader.js:630:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:570:12)
    at Function.Module._load (internal/modules/cjs/loader.js:562:3)
    at Module.require (internal/modules/cjs/loader.js:667:17)
    at require (internal/modules/cjs/helpers.js:20:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ development: `cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ development script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

[manrix]

You've to install fibers.
npm i -D fibers

[Eight-Ball]

@saibotk have you got any idea how to overwrite Vuetify 2.0 variables with Laravel Mix? https://vuetifyjs.com/en/customization/sass-variables - original documentation is for vue-cli application and I haven't got any luck yet in implementing it in mix configuration :/

@pawel-marciniak did you manage to overwrite the vuetify variables ?

[pawel-marciniak]

@Eight-Ball no, I didn't found any good solution yet :/

[Eight-Ball]

I've been stuck for days...

[Eight-Ball]

I've found the solution that works in my case:

Mix.listen("configReady", config => {
  const scssRule = config.module.rules.find(r => r.test.toString() === /\.scss$/.toString())
  const scssOptions = scssRule.loaders.find(l => l.loader === "sass-loader").options
  scssOptions.implementation = sass
  scssOptions.data = "@import \"./resources/sass/setup/_variables.scss\";"

  const sassRule = config.module.rules.find(r => r.test.toString() === /\.sass$/.toString())
  const sassOptions = sassRule.loaders.find(l => l.loader === "sass-loader").options
  sassOptions.implementation = sass
  sassOptions.data = "@import \"./resources/sass/setup/_variables.scss\""
})

[neovive]

Check this repo by one of the Vuetify devs: https://github.com/nekosaur/laravel-vuetify. It uses Laravel Mix and Vuetify 2.

[Eight-Ball]

Thanks. But i need to override vuetify variables. I've found the solution 2 min ago !

[rivajunior]

@saibotk, your solution worked. Here is the mix configuration:

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

Mix.listen('configReady', webpackConfig => {
  // Exclude vuetify folder from default sass/scss rules
  const sassConfig = webpackConfig.module.rules.find(
    rule =>
      String(rule.test) ===
      String(/\.sass$/)
  );

  const scssConfig = webpackConfig.module.rules.find(
    rule =>
      String(rule.test) ===
      String(/\.scss$/)
  );

  sassConfig.exclude.push(path.resolve(__dirname, 'node_modules/vuetify'))
  scssConfig.exclude.push(path.resolve(__dirname, 'node_modules/vuetify'))
});

mix.js('app.js', 'dist/js');

Thanks.

It haven't worked for me because of fiber installation that is missing binaries.

I'm using:

$ node -v
v10.16.3

$ npm -v     
6.11.3

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[Nothing-Works]

I create a package. It does everything for you.

You can try it, and let me know if it's working for you.

And here is laravel setup

It's also on laravel-mix.com

[neovive]

@Nothing-Works Thank you. This looks great! Does it support the vuetify-loader treeshaking features that reduce the size of the production bundle by removing the unused components?

[Nothing-Works]

@neovive Hi it does,

mix.js('resources/js/app.js', 'public/js').vuetify()
//if you use vuetify-loader
mix.js('resources/js/app.js', 'public/js').vuetify('vuetify-loader')

[LucaColombi]

@Nothing-Works

@neovive Hi it does,

mix.js('resources/js/app.js', 'public/js').vuetify()
//if you use vuetify-loader
mix.js('resources/js/app.js', 'public/js').vuetify('vuetify-loader')

hello, components loads ok but seems that css are not correctly loaded, for instance button components are produced but shown without any style, as simple html buttons without style

does I have to configure css loading apart?

[Nothing-Works]

@LucaColombi please make sure your button is within <v-app></v-app>

    <v-app>
      <v-content>
        <v-btn text small color="primary">Primary</v-btn>
      </v-content>
    </v-app>

[hackerESQ]

I've found the solution that works in my case:

Mix.listen("configReady", config => {
  const scssRule = config.module.rules.find(r => r.test.toString() === /\.scss$/.toString())
  const scssOptions = scssRule.loaders.find(l => l.loader === "sass-loader").options
  scssOptions.implementation = sass
  scssOptions.data = "@import \"./resources/sass/setup/_variables.scss\";"

  const sassRule = config.module.rules.find(r => r.test.toString() === /\.sass$/.toString())
  const sassOptions = sassRule.loaders.find(l => l.loader === "sass-loader").options
  sassOptions.implementation = sass
  sassOptions.data = "@import \"./resources/sass/setup/_variables.scss\""
})

@Eight-Ball I've been using this for a while. It works well. But I just noticed that it adds the custom variables to _each_ style tag Vuetify injects into the <head>. So I end up with ~30 duplicate entries of the same variables.

Here's my Mix webpack config:

const mix = require('laravel-mix');
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin')

Mix
    .listen('configReady', config => {
      const scssRule = config.module.rules.find(r => r.test.toString() === /\.scss$/.toString())
      const scssOptions = scssRule.loaders.find(l => l.loader === 'sass-loader').options
      scssOptions.data = '@import "./resources/sass/styles.scss";'

      const sassRule = config.module.rules.find(r => r.test.toString() === /\.sass$/.toString())
      const sassOptions = sassRule.loaders.find(l => l.loader === 'sass-loader').options
      sassOptions.data = '@import "./resources/sass/styles.scss"'
    })

mix
    .webpackConfig({
        plugins: [
            new VuetifyLoaderPlugin()
        ],
        resolve: {
            extensions: ['.js', '.json', '.vue'],
            alias: {
                '~': path.join(__dirname, './resources/js'),
                '$components': path.join(__dirname, './resources/js/components')
            }
        },
    })

mix
    .js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .version()
    .copyDirectory('resources/static', 'public/static');

[harleyj]

@hackerESQ I had a similar issue, however in the Vuetify documentation they mention that you should only use variables in your variable file.
https://vuetifyjs.com/en/customization/sass-variables/#importing-in-variable-files

Variables themselves, e.g.
```$color1: rgba(68, 55, 66, 1);
$color2: rgba(211, 165, 136, 1);
$color3: rgba(236, 226, 208, 1);
$color4: rgba(113, 143, 148, 1);
$color5: rgba(84, 87, 117, 1);

Won't actually get injected into the DOM. They're just used during the webpack compiling of styles. However, using CSS variables such as:

:root {
--swiper-theme-color: $brand;
}
```
WILL get injected and repeated a bunch of times in the DOM.

[Paulsky]

I create a package. It does everything for you.

You can try it, and let me know if it's working for you.

And here is laravel setup

It's also on laravel-mix.com

Thank you very much. This fixed my issue🙏

[jrrmcalcio]

I've found the solution that works in my case:

Mix.listen("configReady", config => {
  const scssRule = config.module.rules.find(r => r.test.toString() === /\.scss$/.toString())
  const scssOptions = scssRule.loaders.find(l => l.loader === "sass-loader").options
  scssOptions.implementation = sass
  scssOptions.data = "@import \"./resources/sass/setup/_variables.scss\";"

  const sassRule = config.module.rules.find(r => r.test.toString() === /\.sass$/.toString())
  const sassOptions = sassRule.loaders.find(l => l.loader === "sass-loader").options
  sassOptions.implementation = sass
  sassOptions.data = "@import \"./resources/sass/setup/_variables.scss\""
})

Laravel Mix 6 is a little different so I changed this snippet to work on that one as well:

// Add vuetify variables overrides
Mix.listen('configReady', config => {
// scss
const scssRule = config.module.rules.find(
r => r.test.toString() === /.scss$/.toString()
)
scssRule.oneOf.forEach(o => {
const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
scssOptions.additionalData = '@import "./resources/sass/variables.scss";'
})

// sass
const sassRule = config.module.rules.find(
r => r.test.toString() === /.sass$/.toString()
)

sassRule.oneOf.forEach(o => {
const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
scssOptions.additionalData = '@import "./resources/sass/variables.scss"'
})
})

[filipembcruz]

After many issues, I solve this on Laravel 8.

// Dependencies
{
        "laravel-mix": "^6.0.6",
        "sass": "^1.20.1",
        "sass-loader": "^8.0.0",
        "vue": "^2.5.17",
        "vue-loader": "^15.9.5",
        "vue-template-compiler": "^2.6.10",
        "vuetify": "^2.4.3",
        "vuetify-loader": "^1.7.1",
}

// webpack.mix.js
const mix = require('laravel-mix');
const webpack = require('./webpack.config');
Mix.listen('configReady', webpackConfig => {
    // scss
    const scssRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.scss$/)
    );
    scssRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.prependData = '@import "./resources/sass/_variables.scss";'
    })

    // sass
    const sassRule = webpackConfig.module.rules.find(
        rule =>
            String(rule.test) ===
            String(/\.sass$/)
    );

    sassRule.oneOf.forEach(o => {
        const scssOptions = o.use.find(l => l.loader === 'sass-loader').options
        scssOptions.prependData = '@import "./resources/sass/_variables.scss"'
    })
})
mix.js('resources/js/app.js', 'public/js')
    .js('resources/js/gift.js', 'public/js')
    .vue()
    .sass('resources/sass/pages/home.scss', 'public/css')
    .sass('resources/sass/pages/gift.scss', 'public/css')
    .webpackConfig(Object.assign(webpack))
    .copyDirectory('resources/images/', 'public/images');

if (mix.inProduction()) {
    mix.version();
};

// webpack.config.js
const VuetifyLoaderPlugin = require('vuetify-loader/lib/plugin');
module.exports = {
    plugins: [
        new VuetifyLoaderPlugin(),
    ]
};