Laravel-mix: Sharing Global Variables

Created on 26 Mar 2019 · 6Comments · Source: JeffreyWay/laravel-mix

Laravel Mix Version: npm list --depth=0
Node Version: v11.4.0
NPM Version: 6.4.1
OS: Windows 10

Description:

I am trying to share my scss variables with all the components seen.
I have too many elements to import into each file.
https://vue-loader.vuejs.org/guide/pre-processors.html#sharing-global-variables

I get the following errors:

ERROR in ./resources/scss/app.scss
Module build failed (from ./node_modules/css-loader/index.js):
ModuleBuildError: Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
                                                                                                                                                                                            ^
      Expected "{".
  ╷
4 │ var content = require("!!../../node_modules/css-loader/index.js!../../node_modules/sass-loader/lib/loader.js?{\"data\":\"C:\\\\resources\\\\assets\\\\scss\\\\_variables.scss\"}!./app.scss");
  │                                                                                                                                                                                              ^
  ╵
  stdin 4:190  root stylesheet
      in C:\projects\server\resources\scss\app.scss (line 4, column 190)
    at runLoaders (C:\projects\server\node_modules\webpack\lib\NormalModule.js:301:20)
    at C:\projects\server\node_modules\loader-runner\lib\LoaderRunner.js:367:11
    at C:\projects\server\node_modules\loader-runner\lib\LoaderRunner.js:233:18
    at context.callback (C:\projects\server\node_modules\loader-runner\lib\LoaderRunner.js:111:13)
    at render (C:\projects\server\node_modules\sass-loader\lib\loader.js:52:13)
    at Function.$2 (C:\projects\server\node_modules\sass\sass.dart.js:24354:48)
    at wO.$2 (C:\projects\server\node_modules\sass\sass.dart.js:15295:15)
    at uP.vq (C:\projects\server\node_modules\sass\sass.dart.js:9034:42)
    at uP.vp (C:\projects\server\node_modules\sass\sass.dart.js:9036:32)
    at iy.uC (C:\projects\server\node_modules\sass\sass.dart.js:8384:46)
    at uo.$0 (C:\projects\server\node_modules\sass\sass.dart.js:8526:7)
    at Object.eG (C:\projects\server\node_modules\sass\sass.dart.js:1512:80)
    at ad.ba (C:\projects\server\node_modules\sass\sass.dart.js:8447:3)
    at iM.ba (C:\projects\server\node_modules\sass\sass.dart.js:8377:25)
    at iM.cv (C:\projects\server\node_modules\sass\sass.dart.js:8364:6)
    at pu.cv (C:\projects\server\node_modules\sass\sass.dart.js:8154:35)
    at Object.m (C:\projects\server\node_modules\sass\sass.dart.js:1383:19)
    at C:\projects\server\node_modules\sass\sass.dart.js:5066:51
    at xe.a (C:\projects\server\node_modules\sass\sass.dart.js:1394:71)
    at xe.$2 (C:\projects\server\node_modules\sass\sass.dart.js:8169:23)
    at vR.$2 (C:\projects\server\node_modules\sass\sass.dart.js:8164:25)
    at uP.vq (C:\projects\server\node_modules\sass\sass.dart.js:9034:42)
    at uP.vp (C:\projects\server\node_modules\sass\sass.dart.js:9036:32)
    at iy.uC (C:\projects\server\node_modules\sass\sass.dart.js:8384:46)
    at uo.$0 (C:\projects\server\node_modules\sass\sass.dart.js:8526:7)
    at Object.eG (C:\projects\server\node_modules\sass\sass.dart.js:1512:80)
    at ad.ba (C:\projects\server\node_modules\sass\sass.dart.js:8447:3)
    at iM.ba (C:\projects\server\node_modules\sass\sass.dart.js:8377:25)
    at iM.cv (C:\projects\server\node_modules\sass\sass.dart.js:8364:6)
    at pv.$0 (C:\projects\server\node_modules\sass\sass.dart.js:8159:24)
    at Object.Id (C:\projects\server\node_modules\sass\sass.dart.js:1540:5)
    at nE.Iq (C:\projects\server\node_modules\sass\sass.dart.js:1542:7)
    at pz.$0 (C:\projects\server\node_modules\sass\sass.dart.js:8130:22)
    at Jc (C:\projects\server\node_modules\sass\sass.dart.js:580:52)
    at Immediate.<anonymous> (C:\projects\server\node_modules\sass\sass.dart.js:589:51)
    at processImmediate (timers.js:632:19)
 @ ./resources/scss/app.scss

ERROR in ./resources/js/views/components/sidebar/components/Matchmaking.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./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/sass-loader/lib/loader.js??ref--11-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/views/components/sidebar/components/Matchmaking.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

            <i class="fas fa-circle-notch fa-spin"></i>
                                                                                                                                                                                                                            ^
      Expected "{".
  ╷
4 │ var content = require("!!../../../../../../node_modules/sass-loader/lib/loader.js??ref--11-2!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Matchmaking.vue?vue&type=style&index=0&lang=scss&");
  │                                                                                                                                                                                                                              ^
  ╵
  stdin 4:222  root stylesheet
      in C:\projects\server\resources\js\views\components\sidebar\components\Matchmaking.vue (line 4, column 222)
 @ ./resources/js/views/components/sidebar/components/Matchmaking.vue?vue&type=style&index=0&lang=scss& (./node_modules/style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./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/sass-loader/lib/loader.js??ref--11-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/views/components/sidebar/components/Matchmaking.vue?vue&type=style&index=0&lang=scss&) 2:14-538
 @ ./resources/js/views/components/sidebar/components/Matchmaking.vue?vue&type=style&index=0&lang=scss&
 @ ./resources/js/views/components/sidebar/components/Matchmaking.vue
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/views/components/sidebar/Sidebar-content.vue?vue&type=script&lang=js&
 @ ./resources/js/views/components/sidebar/Sidebar-content.vue?vue&type=script&lang=js&
 @ ./resources/js/views/components/sidebar/Sidebar-content.vue
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/views/components/sidebar/Sidebar.vue?vue&type=script&lang=js&
 @ ./resources/js/views/components/sidebar/Sidebar.vue?vue&type=script&lang=js&
 @ ./resources/js/views/components/sidebar/Sidebar.vue
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/views/layouts/DashboardLayout.vue?vue&type=script&lang=js&
 @ ./resources/js/views/layouts/DashboardLayout.vue?vue&type=script&lang=js&
 @ ./resources/js/views/layouts/DashboardLayout.vue
 @ ./resources/js/routes/routes.js
 @ ./resources/js/routes/router.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/scss/app.scss

ERROR in ./resources/js/views/components/profil/profil-progress.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./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/sass-loader/lib/loader.js??ref--11-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/views/components/profil/profil-progress.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

            <img alt="..." class="avatar" src="/images/profil/default-user.png">
                                                                                                                                                                                                                          ^
      Expected "{".
  ╷
4 │ var content = require("!!../../../../../node_modules/sass-loader/lib/loader.js??ref--11-2!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./profil-progress.vue?vue&type=style&index=0&lang=scss&");
  │                                                                                                                                                                                                                            ^
  ╵
  stdin 4:220  root stylesheet
      in C:\projects\server\resources\js\views\components\profil\profil-progress.vue (line 4, column 220)
 @ ./resources/js/views/components/profil/profil-progress.vue?vue&type=style&index=0&lang=scss& (./node_modules/style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./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/sass-loader/lib/loader.js??ref--11-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/views/components/profil/profil-progress.vue?vue&type=style&index=0&lang=scss&) 2:14-521
 @ ./resources/js/views/components/profil/profil-progress.vue?vue&type=style&index=0&lang=scss&
 @ ./resources/js/views/components/profil/profil-progress.vue
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/views/Home.vue?vue&type=script&lang=js&
 @ ./resources/js/views/Home.vue?vue&type=script&lang=js&
 @ ./resources/js/views/Home.vue
 @ ./resources/js/routes/routes.js
 @ ./resources/js/routes/router.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/scss/app.scss

ERROR in ./resources/js/views/components/sidebar/components/Container.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./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/sass-loader/lib/loader.js??ref--11-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/views/components/sidebar/components/Container.vue?vue&type=style&index=0&lang=scss&)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
                                                                                                                                                                                                                          ^
      Expected "{".
  ╷
4 │ var content = require("!!../../../../../../node_modules/sass-loader/lib/loader.js??ref--11-2!../../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./Container.vue?vue&type=style&index=0&lang=scss&");
  │                                                                                                                                                                                                                            ^
  ╵
  stdin 4:220  root stylesheet
      in C:\projects\server\resources\js\views\components\sidebar\components\Container.vue (line 4, column 220)
 @ ./resources/js/views/components/sidebar/components/Container.vue?vue&type=style&index=0&lang=scss& (./node_modules/style-loader!./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./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/sass-loader/lib/loader.js??ref--11-2!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/views/components/sidebar/components/Container.vue?vue&type=style&index=0&lang=scss&) 2:14-536
 @ ./resources/js/views/components/sidebar/components/Container.vue?vue&type=style&index=0&lang=scss&
 @ ./resources/js/views/components/sidebar/components/Container.vue
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/views/components/sidebar/Sidebar-content.vue?vue&type=script&lang=js&
 @ ./resources/js/views/components/sidebar/Sidebar-content.vue?vue&type=script&lang=js&
 @ ./resources/js/views/components/sidebar/Sidebar-content.vue
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/views/components/sidebar/Sidebar.vue?vue&type=script&lang=js&
 @ ./resources/js/views/components/sidebar/Sidebar.vue?vue&type=script&lang=js&
 @ ./resources/js/views/components/sidebar/Sidebar.vue
 @ ./node_modules/babel-loader/lib??ref--4-0!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/views/layouts/DashboardLayout.vue?vue&type=script&lang=js&
 @ ./resources/js/views/layouts/DashboardLayout.vue?vue&type=script&lang=js&
 @ ./resources/js/views/layouts/DashboardLayout.vue
 @ ./resources/js/routes/routes.js
 @ ./resources/js/routes/router.js
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/scss/app.scss

ERROR in ./resources/scss/app.scss (./node_modules/css-loader??ref--5-2!./node_modules/postcss-loader/src??postcss0!./node_modules/resolve-url-loader??ref--5-4!./node_modules/sass-loader/lib/loader.js??ref--5-5!./node_modules/vue-style-loader!./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js??ref--11-2!./resources/scss/app.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

undefined
                                                                                                                                   ^
      Expected "{".
  ╷
4 │ var content = require("!!../../node_modules/css-loader/index.js!../../node_modules/sass-loader/lib/loader.js??ref--11-2!./app.scss");
  │                                                                                                                                     ^
  ╵
  stdin 4:133  root stylesheet
      in C:\projects\server\resources\scss\app.scss (line 4, column 133)
 @ ./resources/scss/app.scss 2:14-395

Steps To Reproduce:

My webpack.mix.js:

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

mix.autoload({
    'jquery': ['$', 'window.jQuery', 'jQuery'],
    'vue': ['Vue', 'window.Vue'],
    'moment': ['moment', 'window.moment']
});

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

mix.webpackConfig({
    module: {
        rules: [
            {
                test: /\.scss$/,
                use: [
                    'vue-style-loader',
                    'css-loader',
                    {
                        loader: 'sass-loader',
                        options: {
                            data: path.resolve(__dirname, '/resources/assets/scss/_variables.scss')
                        }
                    }
                ]
            }
        ]
    }
});

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

mix.disableNotifications();

One of the components:

<template>
    <div class="content">

    </div>
</template>

<script>

    export default {

    }
</script>

<style lang="scss">
    .sidebar-content{
        .content{
            border-top: 2px solid $primary-states;
        }
    }
</style>

My variables in scss:

$primary-states: #b83c30 !default;

Thank you for your answers

stale

Source

Panzerknight

Most helpful comment

Anyone found a reasonable solution to this problem yet? It's cumbersome importing variables in every component.

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        extractVueStyles: true,
        globalVueStyles: 'resources/sass/_variables.scss',
    })
    .version();

TemirlanKudabayev on 12 Mar 2020

👍3

All 6 comments

Hi,
you can find the solution in this tutorial #1023

ecordani on 30 Apr 2019

🎉1

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.

stale[bot] on 29 Jun 2019

This solution requires each component to use the same import statement, which becomes cumbersome on larger projects - especially when changing filenames or making broader changes.

Each time you import it appears to copy the _partial.scss instead of referring, which means your output increases dramatically each time you use it.

It would be good to have the choice based on your project to have a sweeping root stylesheet option or indivudally @import in each component.

The perfect example use-case is a common theme _variables.scss file that most components would want access to.

Hi,
you can find the solution in this tutorial #1023

mrspence on 23 Jul 2019

👍1

Anyone found a reasonable solution to this problem yet? It's cumbersome importing variables in every component.

mcfriend99 on 24 Feb 2020

👍1

Anyone found a reasonable solution to this problem yet? It's cumbersome importing variables in every component.

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .options({
        extractVueStyles: true,
        globalVueStyles: 'resources/sass/_variables.scss',
    })
    .version();

TemirlanKudabayev on 12 Mar 2020

👍3

I think I have figured this out by adding some rules to the webpack settings in webpack.mix.js.
I added a rule targeting all .scss files which triggered the sass-loader.

.webpackConfig({
      resolve: {
         alias: {
            '@': path.resolve('resources/sass'),
         },
      },
      module: {
         rules: [
            {
               test: /\.scss$/,
               loader: "sass-loader",
               options: {
                  data: `
                        @import "~@/settings/vars.scss";
                        @import "~@/settings/vars-bootstrap.scss";
                        @import "~@/settings/functions.scss";
                  `
               }
            }
         ]
      }
   })