ImportError: could not import sass

sage
,
1

I recently started a new project and followed the documentation to swap out Tailwind for Bootstrap. After several attempts to create and re-create the project following the instructions to the tee, I keep hitting the same road block.

[sage] › ✖  (node:74221) Warning: To load an ES module, set "type": "module" in the package.json or use the .mjs extension.
(Use `node --trace-warnings ...` to show where the warning was created)

 BudError 

✘ ImportError: could not import sass
problem running hook booted

☰ Stack trace
problem running hook booted
    at BudSass.import (node_modules/@roots/bud-sass/node_modules/@roots/bud-framework/lib/extension/index.js:257:19)
    at async BudSass.register (node_modules/@roots/bud-sass/lib/extension.js:12:32)
    at async BudSass._register (node_modules/@roots/bud-sass/node_modules/@roots/bud-framework/lib/extension/index.js:67:13)

Here’s the process and what I have tried so far:

  • Creating a theme project with composer create-project
  • Installing Acorn
  • Configuring Dev URL and Soil
  • Removing tailwind References
  • Installing Bootstrap and popperjs

Build works to this point, 100%. The following is where it fails / doesn’t work:

  • Setting up Support for Sass, per docs
  • Installing Stylelint
  • Updating Deps to latest
  • Did the same process several times with both, Yarn and NPM
  • Tried other small config tweaks to no avail

I am using MacOS with Apple M2 if that makes any difference.

Has anyone else encountered this or have any pointers where to look? Much appreciated!

2

Does the advice in this thread help?

3

Looks like there’s an upstream bug in Sass that appeared in the most recent version they published yesterday

https://github.com/roots/bud/issues/2311#issuecomment-1582844181

2 Likes
4

Thanks for the responses.

This was definitely a bug in Sass. Downgrading to an earlier version solved the issue.

5

Another solution which doesn’t require downgrading is to use the “resolutions” key in your package.json.

"resolutions": {
    "**/sass": "1.62.0"
  }

You’ll probably need to rm -rf node_modules && yarn install afterwards, but this will enable all devDependencies and peerDependencies of your packages to share the same version of sass (provided it meets criteria).

1 Like