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);