Can Bud be configured in Sage 10 to process SCSS?

sage
1

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();
2

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
3

thank you. this was very helpful.

4

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?

1 Like
5

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

6

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

7

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