Roots Discourse

Can Bud be configured in Sage 10 to process SCSS?

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');

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.

    proxy: 'sage-starter-theme.local',
    browser: ["google chrome"],

  .sass('resources/styles/app.scss', 'styles')
  .sass('resources/styles/editor.scss', 'styles')
    processCssUrls: false,
    postCss: [ require('tailwindcss') ],
    extend: { content: [path.join(__dirname, 'index.php')] },
    safelist: {
      standard: [
      deep: [

  .js('resources/scripts/app.js', 'scripts')
  .js('resources/scripts/customizer.js', 'scripts')
  .blocks('resources/scripts/editor.js', 'scripts')
  .autoload({ jquery: ['$', 'window.jQuery'] })

  .copyDirectory('resources/images', 'public/images')
  .copyDirectory('resources/fonts', 'public/fonts');

  .options({ processCssUrls: false })

There is an extension/package/module for it:

You probably also want to apply these workarounds as some aspects are not fully stable yet:

1 Like

thank you. this was very helpful.

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?

Do you get an SASS compilation error? Or are the variables simply not interpolated to their values?

I think you should change app.css to app.scss, and in bud.config.js relative path to ‘styles/app.scss’.

This topic was automatically closed after 42 days. New replies are no longer allowed.