[tutorial] How to use global Sass vars within Vue Single File Components
See original GitHub issueTested with this version of Mix: https://github.com/JeffreyWay/laravel-mix/tree/29edf9ccbb73bf2048364a5890700365236395c9
From https://laravel.com/docs/5.4/mix#custom-webpack-configuration
// webpack.mix.js
let mix = require('laravel-mix');
const path = require('path')
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Laravel application. By default, we are compiling the Sass
| file for the application as well as bundling up all the JS files.
|
*/
mix
.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.webpackConfig({
resolve: {
alias: {
'@': path.resolve('resources/assets/sass')
}
}
})
// resources/assets/js/components/Example.vue
<template>
<h1>Hello Global Sass Variables</h1>
</template>
<style lang="scss" scoped>
@import '~@/_variables.scss';
h1 {
background: $my-favorite-color;
}
</style>
- From this vue-loader issue: https://github.com/vuejs/vue-loader/issues/328
- This solution particularly: https://github.com/vuejs/vue-loader/issues/328#issuecomment-313225009
This allows you to explicitly import global variables into any Vue component.
To load them implicitly via Webpack, I tried https://vue-loader.vuejs.org/en/configurations/pre-processors.html#loading-a-global-settings-file but didn’t have success. Will open an issue where I think the problem lies.
Issue Analytics
- State:
- Created 6 years ago
- Reactions:14
- Comments:5
Top Results From Across the Web
[tutorial] How to use global Sass vars within Vue Single File ...
This allows you to explicitly import global variables into any Vue component. To load them implicitly via Webpack, I tried https://vue-loader.
Read more >Globally Load SASS into your Vue.js Applications
As a project grows up, you start separating your SASS variables, mixins and functions in separate files. You can import them by using...
Read more >Vue 3 - setting up global Sass/SCSS variables - WebDevEtc
It is very easy to get Vue 3 set up with SCSS/Sass. I found it a bit of a pain to find instructions...
Read more >How to Import a Sass File into Every Vue Component in an App
vue single file component. (See example below.) Now, we can go into our default App.vue component and start using our global variable!
Read more >Vue SFC add global Sass variables to all components
I want these vars available everywhere. How can I globally add my SASS to my single file components without the need for the...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
I think I have figured this out by adding some rules to the
webpack
settings inwebpack.mix.js
. I added a rule targeting all .scss files which triggered thesass-loader
.In newer laravel versions it seems the webpack.mix.js should be changed to
.webpackConfig({ resolve: { alias: { '@': path.resolve('resources/sass') } } });