Can bud be configured to import scss instead of css files? What would that configuration look like?
I had mix configured like this to process scss:. There were a number of customizations to postcss as well to get it to play nicely with my styles for blocks.
const mix = require('laravel-mix');
const whitelister = require('purgecss-whitelister');
require('@tinypixelco/laravel-mix-wp-blocks');
require('laravel-mix-purgecss');
require('laravel-mix-copy-watched');
let path = require('path');
/*
|--------------------------------------------------------------------------
| Mix Asset Management
|--------------------------------------------------------------------------
|
| Mix provides a clean, fluent API for defining some Webpack build steps
| for your Sage application. By default, we are compiling the Sass file
| for your application, as well as bundling up your JS files.
|
*/
mix
.setPublicPath('./public')
.browserSync({
proxy: 'sage-starter-theme.local',
browser: ["google chrome"],
});
mix
.sass('resources/styles/app.scss', 'styles')
.sass('resources/styles/editor.scss', 'styles')
.options({
processCssUrls: false,
postCss: [ require('tailwindcss') ],
})
.purgeCss({
extend: { content: [path.join(__dirname, 'index.php')] },
safelist: {
standard: [
'editor-styles-wrapper',
...whitelister([
'resources/styles/common/**/*',
'resources/styles/components/**/*',
'resources/styles/config/**/*',
'resources/styles/partials/**/*',
]),
...require('purgecss-with-wordpress').whitelist,
],
deep: [
/^has-.*-color$/,
...require('purgecss-with-wordpress').whitelistPatterns,
],
},
});
mix
.js('resources/scripts/app.js', 'scripts')
.js('resources/scripts/customizer.js', 'scripts')
.blocks('resources/scripts/editor.js', 'scripts')
.autoload({ jquery: ['$', 'window.jQuery'] })
.extract();
mix
.copyDirectory('resources/images', 'public/images')
.copyDirectory('resources/fonts', 'public/fonts');
mix
.options({ processCssUrls: false })
.sourceMaps()
.version();
Thanks for the links, finally found out how to add .scss files to Sage 10 project.
However, I am unable to use any sass variables in my project like in Sage 9. Any tips on how to achieve this?
In app.css I have: @import “common/_variables.scss”;
In _variables.scss I have:
$test-color: red;
h1 {
color: $test-color;
}
The above _variables.scss code doesnt work, any tips how to get the variables to work?