During development, is there a way to enable Sass sourcemaps?
Looking at .budfiles/bud/webpack.config.js, I see sourcemap is set to true, but my devtools only show styles dumped within a <style> tag with no references to the sass partial files or line numbers:
"loader": "/Volumes/Evo/Local/mysite/app/public/wp-content/themes/sage/node_modules/sass-loader/dist/cjs.js",
"options": {
"implementation": {
"sassNull": {},
"sassTrue": {
"value": true
},
"sassFalse": {
"value": false
},
"Logger": {
"silent": {}
},
"info": "dart-sass\t1.49.9\t(Sass Compiler)\t[Dart]\ndart2js\t2.16.1\t(Dart Compiler)\t[Dart]",
"types": {},
"NULL": {},
"TRUE": {
"value": true
},
"FALSE": {
"value": false
},
"default": {
"sassNull": {},
"sassTrue": {
"value": true
},
"sassFalse": {
"value": false
},
"Logger": {
"silent": {}
},
"info": "dart-sass\t1.49.9\t(Sass Compiler)\t[Dart]\ndart2js\t2.16.1\t(Dart Compiler)\t[Dart]",
"types": {},
"NULL": {},
"TRUE": {
"value": true
},
"FALSE": {
"value": false
}
}
},
"sourceMap": true
}
}
Download the latest versions of bud. Then set devtool to eval and you will see the correct files corresponding to the style.
With bud-sass 5.7.7 and .devtool(eval), I don’t see any corresponding css sourcemaps in devtools during development. Also, wouldn’t setting devtool to eval return no sourcemaps? GitHub - webpack-contrib/css-loader: CSS Loader
My bud.config.js
/**
* @typedef {import('@roots/bud').Bud} bud
*
* @param {bud} app
*/
module.exports = async (app) => {
app
.devtool(eval)
.entry({
app: ['@scripts/app', '@styles/app'],
editor: ['@scripts/editor', '@styles/editor'],
})
.assets('images')
.watch('resources/views/**/*', 'app/**/*')
.proxy('https://site.local')
.serve('http://0.0.0.0:3000');
};
You’re missing quotes around eval.
1 Like
I tried eval as a string, and it returned an error stating devtool requires a boolean option.
Module build failed (from ./node_modules/css-loader/dist/cjs.js): │
│ ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the │
│ API schema. │
│ - options.sourceMap should be a boolean. │
│ -> Allows to enable/disable source maps. │
│ -> Read more at https://github.com/webpack-contrib/css-loader#sourcemap
I tried eval as a string, and it returned an error stating devtool requires a boolean option.
Module build failed (from ./node_modules/css-loader/dist/cjs.js): │
│ ValidationError: Invalid options object. CSS Loader has been initialized using an options object that does not match the │
│ API schema. │
│ - options.sourceMap should be a boolean. │
│ -> Allows to enable/disable source maps. │
│ -> Read more at https://github.com/webpack-contrib/css-loader#sourcemap
I also read the bud docs and it shows by example:
bud.config.js
bud.devtool('inline-cheap-module-source-map')
Looking at .budfiles/bud/webpack.config.js , I see sourcemap is set to true , and if I specify something like bud.devtool('eval-source-map'), I can see the option reflected within .budfiles/bud/webpack.config.js but I still get the CLI error as posted above and no sourcemap.
Ah I now see your bud-sass has the latest version, but you need the latest version of all bud dependencies. I got this problem too and its fixed in the latest version.
Thank you! Yes, I didn’t know or think to check the dependency versions as I used composer to install Sage, so I didn’t install bud separately. Therefore, some of those dependencies are installed as v5.7.6, not v5.7.7.
