How to Import a Sass File into Every Vue Component, using Laravel Mix

If you want to organize the structure of your application so that you have some globally defined Sass mixins or variables, you can use in every Vue component compiled by Laravel mix, we've got you covered.

Why?

If you wondering why we would want to do something like this, here little example of global time-saving mixin:

=dark-mode
    @media (prefers-color-scheme: dark)
        @content

It allows you to replace long @media (prefers-color-scheme: dark) with short +dark-mode

.caption-input
    width: 100%
    input
        +dark-mode
            color: white
        width: 100%
        &[type=number]
            width: 4.5rem

How?

1.. Make sure your Vue single file components compilation already works.

2.. Make sure sass-resources-loader installed. If not, run:

npm install -D sass-resources-loader 

3.. Add config inside vue() command, like this

mix.sass('resources/sass/backend.sass', 'public/css')
   .js('resources/js/backend.js', 'public/js')
   .vue({ globalStyles: { sass: ['resources/sass/shared/settings/mixins.sass'] } });

🎉 And there you have it! No more @import-ing the same mixins file throughout your entire Vue application.