Sass sourcemaps with bud?

[deathintheafternoon7]

Has anyone managed to enable sass sourcemaps with the latest sage and bud-sass packages?
In my wordpress installation everything is working fine except the sourcemaps that are not showing in the browser.
In a earlier installation (version 6.6.9) that was working. See screeshots:

“devDependencies”: {
“@roots/bud”: “6.6.9”,
“@roots/bud-sass”: “^6.6.9”,
“@roots/sage”: “6.6.9”
},

But in the installation with the latest versions there’s no sourcemapping:

“devDependencies”: {
“@roots/bud”: “6.17.0”,
“@roots/bud-sass”: “6.17.0”,
“@roots/sage”: “6.17.0”
},

I tested it with node version 16, 18 and latest.

My bud.config.mjs:

/**
 * Build configuration
 *
 * @see {@link https://bud.js.org/guides/configure}
 * @param {import('@roots/bud').Bud} app
 */
export default async (app) => {
  //console.log(app);
  app
    /**
     * Application entrypoints
     */
    .entry({
      app: ["@scripts/app", "@styles/app"],
      editor: ["@scripts/editor", "@styles/editor"],
    })
    /**
     * Postcss Plugins
     */
    //.tap(({ postcss }) => postcss.setPlugin("postcss-pxtorem"))
    /**
     * Directory contents to be included in the compilation
     */
    .assets(["images"])

    /**
     * Matched files trigger a page reload when modified
     */
    .watch(["resources/views/**/*", "app/**/*"])

    /**
     * Proxy origin (`WP_HOME`)
     */
    .proxy("http://optive.ch.local")

    /**
     * Development origin
     */
    .serve("http://optive.ch.local:3000")

    /**
     * URI of the `public` directory
     */
    .setPublicPath(
      app.isDevelopment ? "./wp-content/themes/optive/public" : "../"
    )

    /**
     * Generate WordPress `theme.json`
     *
     * @note This overwrites `theme.json` on every build.
     */
    //.postcss.setSourceMap(true)
    //.postcss.set(`postcssOptions.sourceMap`, `true`)

    .wpjson.settings({
      color: {
        custom: false,
        customGradient: false,
        defaultPalette: false,
        defaultGradients: false,
        palette: [
          {
            slug: "optive-charcoal",
            color: "#343839",
            name: "Charcoal",
          },
          {
            slug: "optive-fawn",
            color: "#ceb282",
            name: "Fawn",
          },
          {
            slug: "optive-fawn-light",
            color: "#f5f1ea",
            name: "Fawn Light",
          },
          {
            slug: "optive-alabaster",
            color: "#fbfbfb",
            name: "Alabaster",
          },
          {
            slug: "optive-coffee",
            color: "#a48348",
            name: "Coffee",
          },
        ],
      },
      custom: {
        spacing: {},
        typography: {
          "font-size": {},
          "line-height": {},
        },
      },
      spacing: {
        padding: true,
        units: ["px", "%", "em", "rem", "vw", "vh"],
      },
      typography: {
        customFontSize: false,
      },
    })
    .enable();
};

Would be great if you could give me some hints to point me in the right direction.
Thanks in advance!

[nmakris]

You can add the following to your script app.devtool(inline-cheap-module-source-map).

Bud devtool documentation source

[deathintheafternoon7]

Thank you nmakris for your reply. I already tried this (seen here: CSS sourcemaps with bud? - #6 by djmtype). But it’s not changing anything.

Could it be that there is a version mismatch somewhere in the dependency tree? What am I missing?

[nmakris]

What command are you running? The watcher or the full build compiler?

[deathintheafternoon7]

When I run yarn dev → optive.ch.local:3000

It shows the inline style line number.

When I run yarn build → optive.ch.local

It shows the app.css from the public folder.

[nmakris]

Have you added this part at all, maybe see if that assists? I’ve had to rework the entire bud.config.js file to meet my companies needs, which relies on a .env file’s ENV type, so that we can run yarn build and give our dev environments these sourcemaps.

app.when(bud.isDevelopment, bud => bud.devtool('inline-cheap-module-source-map')

[deathintheafternoon7]

That is also something I’ve tried already.
…

.when(app.isDevelopment, (app) =>
      app.devtool("inline-cheap-module-source-map")
    )

…
or with just “source-map”

But no difference.

[ProjectKarol]

I spent the entire day attempting to resolve the source map issue but had no success. I experimented with both SASS and PostCSS, and explored all options using app.devtool . It’s possible that this is an issue related to the latest version of Sage “10.7.0”. I also attempted a clean install, but nothing worked.

[CosyStudios]

Had the same issue - I ended up using post css and the following config,

.tap(bud => {
      bud.when(app.isDevelopment, app => {
        app.postcss.setSourceMap(true)
      })
    })

[deathintheafternoon7]

Hey CosyStudios, thank you for replying. I’ve managed to set it to true. But still no sourcemaps.

Has anyone achieved to have sourcemaps with sass in earlier versions but later than 6.6.9?

[flei]

I have also never been able to enable source maps. Dev inspector always points to the dynamic section when using the dev server.

Tried all of the mentioned solutions from above, too.

Would be interested in a solution. I am using these dev dependencies:

  "devDependencies": {
    "@popperjs/core": "^2.11.8",
    "@roots/bud": "^6.18.0",
    "@roots/bud-sass": "^6.18.0",
    "@roots/sage": "^6.18.0",
    "bootstrap": "^5.3.2"
  },

Let me know if I can help by supplying more info on my setup.

[deathintheafternoon7]

I finally was able to get it to work with the most recent version of bud, bud-sass and sage.
package.json:
“devDependencies”: {
“@roots/bud”: “6.20.0”,
“@roots/bud-sass”: “6.20.0”,
“@roots/sage”: “6.20.0”
}

The only thing I had to add to bud.config.js is app.postcss.setSourceMap(true);

[elmar]

@deathintheafternoon7
How did you achieve this? I have huge problems (for 4 hours now) to get _partials set up correctly in the source map. I have only the app.scss referenced here. None of any included _partial.scss.
“devDependencies”: {
“roots/bud”: “6.20.0”,
“roots/bud-sass”: “^6.23.3”,
“roots/sage”: “6.20.0”
Any hint?

[deathintheafternoon7]

You have to have the exact same version on each dependency. My current setup:

“devDependencies”: {
“@roots/bud”: “6.23.3”,
“@roots/bud-eslint”: “6.23.3”,
“@roots/bud-prettier”: “6.23.3”,
“@roots/bud-sass”: “6.23.3”,
“@roots/bud-stylelint”: “6.23.3”,
“@roots/eslint-config”: “^6.23.3”,
“@roots/sage”: “6.23.3”,
},

The node version should be bigger or equal to 20.

“engines”: {
“node”: “>=20.0.0”
},

Don’t ask me why. It works for me.

[deathintheafternoon7]

The line numbers of the partial sass files are not shown in safari browser. Its not working with safari. Only chrome and firefox.

[elmar]

hmm…

I have this dependencies now:

  "devDependencies": {
    "@roots/bud": "6.23.3",
    "@roots/bud-sass": "6.23.3",
    "@roots/sage": "6.23.3"
  },
  "dependencies": {}

and this bud.config.js

    app
        .entry({
            app: ['@scripts/app', '@styles/app'],
            editor: ['@scripts/editor'], //, '@styles/editor'],
        })
        .use(sass) // use Sass for SCSS files
        .assets(['images']);

    /**
     * Enable SCSS source maps
     */
    app.sass.setSourceMap(true);
    app.devtool('source-map');

I can see, a sourcemap for my css is generated in the public folder like this:

public
__css
____app.ca6da1.css
____app.ca6da1.css.map

but all I get in Chrome is:

[deathintheafternoon7]

in bud.config.js i have:

app
.entry(‘app’, [‘@scripts/app’, ‘@styles/app’])
.entry(‘editor’, [‘@scripts/editor’, ‘@styles/editor’])
.assets([‘images’]);

and

app.postcss.setSourceMap(true);

but not

app.sass.setSourceMap(true);
app.devtool('source-map');

and you would have to add

"postcss": "^8.4.47",

to the devDependencies section in package.json

[elmar]

I got a solution for my sourcemaps, which are now working for DEV builds. Prod still shows the main.scss reference, but I’t ok for developing purposes.

I just have this dependencies:

  "devDependencies": {
    "@roots/bud": "6.23.3",
    "@roots/bud-sass": "6.23.3",
    "@roots/sage": "6.23.3"
  },
  "dependencies": {}

The bud.config.js part is this here:

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

    /**
     * Enable SCSS source maps
     */
    app.postcss.setSourceMap(true);

As far as I undersand, PostCSS is already included in the bud dependency, so I don’t need to include it again.

Doing this, it works very well running the dev build (yarn run dev):