Bud-Sass - Cannot read properties of undefined (reading 'importGlobal')

bud
1

Hi there

Finally managed to get Sage 10 working after getting a new desktop. Looking at putting in Sass to my project so I was looking at Bud Sass but seem to be having trouble getting it build. It is entirely possible I’m doing something wrong, I was a bit confused at the documentation so I may have something put in the wrong file or something simple like that.

I have my resources>styles directory which houses an app.css and an editor.css. I have created a main.scss file in here and in my bug config I have added the importGlobal line that I found in the documentation and also spotted a number of comments about where to place it so I have placed it here (see code) however I am getting the error of Cannot read properties of undefined (reading 'importGlobal') and I can’t seem to figure out where I’m going wrong. Any ideas?

export default async (app) => {
  /**
   * Application assets & entrypoints
   *
   * @see {@link https://bud.js.org/docs/bud.entry}
   * @see {@link https://bud.js.org/docs/bud.assets}
   */
  app
    .sass.importGlobal('@src/styles/main')
    .entry('app', ['@scripts/app', '@styles/app'])
    .entry('editor', ['@scripts/editor', '@styles/editor']);
    
  app.assets(['images']);

  /**
   * Set public path
   *
   * @see {@link https://bud.js.org/docs/bud.setPublicPath}
   */
  app.setPublicPath('/wp-content/themes/portfolio/');
1 Like
2

I’m looking over my last project using sass and it looks like the only changes I made were to add @roots/bud-sass to the project and change app.css and editor.css to app.scss and editor.scss

For your Global Imports I think @src is the wrong alias. If your files are in the styles directory, using @styles/main looks to be more appropriate. Here’s more info about bud aliases: bud.alias | bud.js

3

What are the version numbers of Bud and all its extensions in your project? Make sure they all match; I just dealt with this myself!

1 Like
4

Where did you import the roots/bud-sass into? The bud config?

5

You only need to install it from your theme directory. yarn add @roots/bud-sass --dev

As @MWDelaney noted, it’s worth checking your package.json file to make sure all of your bud extensions have the same version number. Here’s the relevant parts of my package.json file from a recent project:

"devDependencies": {
    "@roots/bud": "6.12.2",
    "@roots/bud-sass": "6.12.2",
    "@roots/bud-tailwindcss": "6.12.2",
    "@roots/sage": "6.12.2"
  },
2 Likes
6 
  "devDependencies": {
    "@roots/bud": "6.12.2",
    "@roots/bud-babel": "^6.12.3",
    "@roots/bud-sass": "^6.12.3",
    "@roots/bud-tailwindcss": "6.12.2",
    "@roots/sage": "6.12.2"
  },

So this is my package.json file, I’ve noticed my bud-sass version is .3 whereas others are .2. I’ve changed the two css files to scss and attempted to make some changes but even when building I notice that it’s saying the bud babel and bud sass versions don’t match but I can’t quite catch the error before it vanishes. Where else could I check the versions to ensure they match?

7

I think you can run this to keep the package versions in sync

yarn bud upgrade

If that doesn’t work, update your package.json so all versions match eg. 6.12.3 then run yarn install

1 Like
8

So it seems to have worked. Technically both of you were correct but I’ll accept @MWDelaney as the solution as he was the first to mention the versions but for anybody else reading this, both users had the correct answer!

1 Like