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

December 26, 2020 ≈ 42 seconds

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.

Subscribe to our newsletter

If you provide url of your website, we send you free design concept of one element (by our choice)

Subscribing to our newsletter, you comply with subscription terms and Privacy Policy