# Configure Sage 10 to use SCSS **URL:** https://discourse.roots.io/t/configure-sage-10-to-use-scss/22627 **Category:** sage **Tags:** sage10 **Created:** 2022-03-18T21:21:00Z **Posts:** 7 ## Post 1 by @chiller — 2022-03-18T21:21:01Z 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)``` ``` --- ## Post 2 by @alwaysblank — 2022-03-18T21:23:35Z Have you followed the instructions in the guide? [@roots/bud-sass | bud.js](https://bud.js.org/extensions/bud-sass) --- ## Post 3 by @chiller — 2022-03-18T21:32:55Z 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)``` ``` --- ## Post 4 by @Jacek — 2022-03-18T23:15:10Z Could you show how you import css or scss files? --- ## Post 5 by @chiller — 2022-03-19T00:08:44Z 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/'); }; ``` --- ## Post 6 by @kellymears — 2022-03-19T00:58:26Z @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: > > > I'm attempting to use the bud extension for sass, but using any build after it i…s installed throws an error - Error: TypeError: app.hooks.on(...).build.setLoader is not a function > > This is the full error output: > > ``` > % yarn build > yarn run v1.22.10 > warning ../../../../../../package.json: No license field > $ bud build > [root] › ✖ Error: TypeError: app.hooks.on(...).build.setLoader is not a function > 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 (/Users/tjszewczak/Sites/locale/web/app/themes/locale/node_modules/@roots/bud-framework/lib/cjs/Framework/index.js:544:15) > at Extensions.injectExtensions (/Users/tjszewczak/Sites/locale/web/app/themes/locale/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 (/Users/tjszewczak/Sites/locale/web/app/themes/locale/node_modules/@roots/bud-extensions/lib/cjs/Extensions/extensions.service.js:73:9) > at async /Users/tjszewczak/Sites/locale/web/app/themes/locale/node_modules/@roots/bud-framework/lib/cjs/Framework/lifecycle/index.js:56:13 > at async Promise.all (index 3) > at async /Users/tjszewczak/Sites/locale/web/app/themes/locale/node_modules/@roots/bud-framework/lib/cjs/Framework/lifecycle/index.js:51:9 > at async /Users/tjszewczak/Sites/locale/web/app/themes/locale/node_modules/@roots/bud-framework/lib/cjs/Framework/lifecycle/index.js:47:9 > at async Bud.lifecycle (/Users/tjszewczak/Sites/locale/web/app/themes/locale/node_modules/@roots/bud-framework/lib/cjs/Framework/lifecycle/index.js:46:5) > at async factory (/Users/tjszewczak/Sites/locale/web/app/themes/locale/node_modules/@roots/bud/lib/cjs/factory/index.js:55:5) > [root] › ❯ registering action: event.project.write 1 registered > [root] › ✔ [2/4] boot cache > [process] › ℹ info beforeExit > [process] › ℹ info exit > ✨ Done in 2.31s. > ``` > > Here's my package.json: > > ``` > { > "name": "sage", > "private": true, > "browserslist": [ > "extends @wordpress/browserslist-config" > ], > "engines": { > "node": ">=16.0.0" > }, > "scripts": { > "dev": "bud dev", > "build": "bud build", > "translate": "npm run translate:pot && npm run translate:js", > "translate:pot": "wp i18n make-pot . ./resources/lang/sage.pot --ignore-domain --include=\"app,resources\"", > "translate:js": "wp i18n make-json ./resources/lang --pretty-print" > }, > "devDependencies": { > "@roots/bud": "5.5.0", > "@roots/bud-postcss": "^5.6.2", > "@roots/bud-sass": "^5.6.2", > "@roots/sage": "5.5.0" > } > } > ``` > > Everything builds as expected when sass/postcss extensions are omitted & uninstalled. I'm using node v16.3.0 (with npm 6.14.13). --- ## Post 7 by @chiller — 2022-03-19T01:16:44Z @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!