(laravel.mix + vuetify-loader) Can't get variables.scss to work. Getting SassError: expected "{" in every component. Probably my rules for vuetify-loader / sass-loader?

[lephro]

I'm about to lose my mind. I've send the last 4 hours to get my variables.scss file with vuetify-loader / sass-loader to work.

As soon as set the following rules, webpack / laravel.mix goes nuts and throws sass-loader errors (see below) in each component. So something must be wrong with it. I've tried all kind of things, but I just can't get it to work.

I'm not really familiar with webpack, so I assume, that theres just a simple mistake on my side. The error points to the semicolon at the end of the code that webpack generates. I've checked the semicolon in the rules 100 times. I'm so despaired, I've already even tried all combinations of semicolons, although I knew it doesnt make sense XD

Also the place, were the error occurence is shown in, is weird, but then again,... I have no idea what iam actually looking at, when I look at the "error in" description. Is this a stack trace or what is webpack trying to tell me? :)

Its also my first laravel and vue project. Please tell me if you see something that should be done differently (apart from my obviously broken webpack rules :D ).

I've used previously a small package that configured webpack with the vuetify- / sass-loader. Since it (for obvious reasons) stopped working, after updating laravel.mix and vuetify-loader, I thought I'll just follow the documentation and will be fine... that was more than 4 hours ago 👍. I'm not fine (anymore)... I'm about to lose my mind... PLEASE HELP

Errors

I get these erros, across all components:

ERROR in ./resources/js/components/Tournament/Admin/Template/BracketEditor.vue?vue&type=style&index=0&id=1a05370b&lang=scss&scoped=true& (./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12[0].rules[0].use[1]!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12[0].rules[0].use[2]!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-12[0].rules[0].use[3]!./node_modules/vue-style-loader/index.js!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js??clonedRuleSet-23[0].rules[0].use[2]!./node_modules/vue-loader/lib/index.js??vue-loader-options!./resources/js/components/Tournament/Admin/Template/BracketEditor.vue?vue&type=style&index=0&id=1a05370b&lang=scss&scoped=true&)

Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: expected "{".

It points to the semicolon at the end of this (during webpack-build generated?) line of code:
var content = require("!!../../../../../../node_modules/css-loader/dist/cjs.js!../../../../../../node_modules/sass-loader/dist/cjs.js??clonedRuleSet-23[0].rules[0].use[2]!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./BracketEditor.vue?vue&type=style&index=0&id=1a05370b&lang=scss&scoped=true&");

webpack.config.js

These are the rules, causing it, which are basiclly copied from the vuetify documentation (and removed the lines that are for the older sass-loader version)

[...]

module: {
    rules: [
      // SASS has different line endings than SCSS
      // and cannot use semicolons in the markup
      {
        test: /\.sass$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: "@import '§/variables.scss'"
            },
          },
        ],
      },
      // SCSS has different line endings than SASS
      // and needs a semicolon after the import.
      {
        test: /\.scss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            options: {
              additionalData: "@import '§/variables.scss';"
            },
          },
        ],
      },
    ],
  },
  resolve: {
    alias: {
      '@': path.resolve('resources/js'),
      '§': path.resolve('resources/styles')
    },
  },
}

package.json

I got these packetes installed (everything relevant should up to date):

[...]

"cross-env": "^7.0.3",
"deepmerge": "^4.2.2",
"laravel-mix": "^6.0.11",
"postcss": "^8.2.4",
"resolve-url-loader": "^3.1.2",
"sass": "^1.32.5",
"sass-loader": "^10.1.1",
"vue": "^2.6.12",
"vue-loader": "^15.9.6",
"vue-template-compiler": "^2.6.12"
"vuetify": "^2.4.3",
"vuetify-loader": "^1.7.1"

[...]

webpack.mix.js

The whole pack-chain looks like this:

const mix = require('laravel-mix');

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

// Workaround
mix.extend('vuetify', new class {
  webpackConfig (config) {
    config.plugins.push(new VuetifyLoaderPlugin())
  }
})
mix.vuetify();

mix.webpackConfig(require('./webpack.config'));

mix.disableNotifications();

mix.js('resources/js/app.js', 'public/js')
   .vue()
   .options({
      processCssUrls: false,
    })
   .autoload({ 
      jquery: ['$', 'window.jQuery', 'jQuery'],
    })
   .sourceMaps(false)
   .sass('resources/styles/app.scss', 'public/css')

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

variables.scss

My variables.scss contains just those few declarations:

// Globals
$primary-color: #e28035;
$secondary-color: #a05d2a;

$body-font-family: 'Oxanium', cursive;

$tooltip-background-color: rgba($secondary-color, 0.9);
$tooltip-text-color: white;

.v-application {
  .display-1,
  .display-2,
  .display-3,
  .display-4,
  .headline,
  .title,
  .subtitle-1,
  .subtitle-2,
  .body-1,
  .body-2,
  .caption,
  .overline {
    font-family: $body-font-family !important;
  }
}

PLEASE HELP ME, BEFORE I GO INSANE

[KaelWD]

mix.webpackConfig adds to the existing config, so you end up with two sets of rules for .scss files. You need to figure out how to modify the existing rules with mix, or use a better tool like vue-cli.

[lephro]

Thank you! I figured that that might be the problem. Do you know if i can retroactivly switch to vue-cli, without too much of a hastle? or would it be unrecommended to do so, at that stage?