Configure Sage 10 to use SCSS

Hey Everyone,

I just got my first Sage 10 project up and running and everything is working as intended so far. One thing I would like to configure in it, but haven’t been able to find any solid documentation on how to do it, is to configure it to compile SCSS files rather than plain CSS. I tried installing @roots/bud-sass --dev into the project but then I start getting the following build errors. Am I on the right track and just missing some steps or am I way off?

Any help on this would be greatly appreciated!

~Charlie

    at Extensions.registerExtension ([secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:134:19)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:99:17
    at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
    at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
    at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
    at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
    at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
    at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
    at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
Internal Error: Error: TypeError: app.hooks.on(...).build.setLoader is not a function
    at Bud.error (/mnt/c/Users/chiller/Documents/ThriveMS/wp-content/themes/thrive/node_modules/@roots/bud-framework/lib/cjs/Framework/index.js:544:15)
    at Extensions.injectExtensions (/mnt/c/Users/chiller/Documents/ThriveMS/wp-content/themes/thrive/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:107:22)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Extensions.boot (/mnt/c/Users/chiller/Documents/ThriveMS/wp-content/themes/thrive/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:73:9)
    at async /mnt/c/Users/chiller/Documents/ThriveMS/wp-content/themes/thrive/node_modules/@roots/bud-framework/lib/cjs/Framework/lifecycle/index.js:56:13
    at async Promise.all (index 3)
    at async /mnt/c/Users/chiller/Documents/ThriveMS/wp-content/themes/thrive/node_modules/@roots/bud-framework/lib/cjs/Framework/lifecycle/index.js:51:9
    at async /mnt/c/Users/chiller/Documents/ThriveMS/wp-content/themes/thrive/node_modules/@roots/bud-framework/lib/cjs/Framework/lifecycle/index.js:47:9
    at async Bud.lifecycle (/mnt/c/Users/chiller/Documents/ThriveMS/wp-content/themes/thrive/node_modules/@roots/bud-framework/lib/cjs/Framework/lifecycle/index.js:46:5)
    at async factory (/mnt/c/Users/chiller/Documents/ThriveMS/wp-content/themes/thrive/node_modules/@roots/bud/lib/cjs/factory/index.js:55:5)```

Have you followed the instructions in the guide? @roots/bud-sass | bud.js

Hadn’t seen this page before. I just tried installing both @roots/bud-sass and @roots/bud-postcss, changing the app.css file to app.scss. But when I go to build I am still getting the same error.

    at Extensions.registerExtension ([secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:134:19)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:99:17
    at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
    at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
    at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
    at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
    at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
    at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
    at async [secure]/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:98:17
Internal Error: Error: TypeError: app.build.setLoader is not a function
    at Bud.error (/mnt/c/Users/chiller/Documents/ThriveMS/wp-content/themes/thrive/node_modules/@roots/bud-framework/lib/cjs/Framework/index.js:544:15)
    at Extensions.injectExtensions (/mnt/c/Users/chiller/Documents/ThriveMS/wp-content/themes/thrive/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:107:22)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Extensions.boot (/mnt/c/Users/chiller/Documents/ThriveMS/wp-content/themes/thrive/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:73:9)
    at async /mnt/c/Users/chiller/Documents/ThriveMS/wp-content/themes/thrive/node_modules/@roots/bud-framework/lib/cjs/Framework/lifecycle/index.js:56:13
    at async Promise.all (index 3)
    at async /mnt/c/Users/chiller/Documents/ThriveMS/wp-content/themes/thrive/node_modules/@roots/bud-framework/lib/cjs/Framework/lifecycle/index.js:51:9
    at async /mnt/c/Users/chiller/Documents/ThriveMS/wp-content/themes/thrive/node_modules/@roots/bud-framework/lib/cjs/Framework/lifecycle/index.js:47:9
    at async Bud.lifecycle (/mnt/c/Users/chiller/Documents/ThriveMS/wp-content/themes/thrive/node_modules/@roots/bud-framework/lib/cjs/Framework/lifecycle/index.js:46:5)
    at async factory (/mnt/c/Users/chiller/Documents/ThriveMS/wp-content/themes/thrive/node_modules/@roots/bud/lib/cjs/factory/index.js:55:5)```

Could you show how you import css or scss files?

Sure thing. It’s mostly straight out of the box with the exception that I added one file and renamed app.css to app.scss.

app.scss

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
@import 'components/_header.scss';

bud.config.js

/**
 * @typedef {import('@roots/bud').Bud} bud
 *
 * @param {bud} app
 */
module.exports = async (app) => {
  app
    /**
     * Application entrypoints
     *
     * Paths are relative to your resources directory
     */
    .entry({
      app: ['@scripts/app', '@styles/app'],
      editor: ['@scripts/editor', '@styles/editor'],
    })

    /**
     * These files should be processed as part of the build
     * even if they are not explicitly imported in application assets.
     */
    .assets('images')

    /**
     * These files will trigger a full page reload
     * when modified.
     */
    .watch('resources/views/**/*', 'app/**/*')

    /**
     * Target URL to be proxied by the dev server.
     *
     * This is your local dev server.
     */
    .proxy('http://localhost/')

    /**
     * Development URL
     */
    //.serve('http://localhost:8080/');
};

@chiller I think it’s highly probable you have a versions mismatch. To me it looks like @roots/bud-sass is trying to do a call introduced in 5.6. I’m guessing @roots/bud is at <=5.5.

 Internal Error: Error: TypeError: app.build.setLoader is not a function

Make sure everything is @ 5.6.2 and you should be golden.

Related github issue:

3 Likes

@kellymears That was it, sage and bud were at 5.5.0, bumped those to 5.6.2 and everything worked! Thank you so much!

3 Likes