yarn add golden-css -D
or npm install golden-css --dev
app.scss
@import '~golden-css/scss/base';
@import '~golden-css/scss/golden';
app.scss
@import 'base';
@import '~golden-css/scss/golden';
_base.scss
@import 'variables'; // or whatever functions/mixins you may have
@import '~golden-css/scss/base';
Now, you can use _base.scss to have access to all variables in a scoped component without class definitions being repeated.
The seemingly random css values (e.g. padding: 2.42705rem
) can be hard to debug. With some small configuration, you can change it to show a much more friendlypadding: var(--spacer-5)
.
To set this up, you'll need to inject an $environment
variable from webpack.
NOTE: Use the CSS calc function when doing any arithmetic so it work for css variables AND sass variables. e.g. calc(#{$spacer-1} * 2)
Update your sass line in webpack.mix.js to this:
mix.sass('resources/sass/app.scss', 'public/css', {
data: `$environment: '${process.env.NODE_ENV}';`,
})
Add this to your vue.config.js
module.exports = {
// ...
css: {
loaderOptions: {
sass: {
prependData: `$environment: '${process.env.NODE_ENV}';`,
},
},
},
// ...
}