I’m guessing other people have encountered this issue but cannot find the solve on here.
Wordpress 4.9.8
Sage 9.0.5
Normal installation nothing fancy. I used composer-create and picked tailwind for css framework. Then setup tailwind defaults, then ran yarn build and yarn start. When the browsersync localhost pops up none of the sourcemaps show up. I can see the maps generated in the dist folder but the browser won’t read them. In browsersync they point you to the injected inline styles and the regular server they show you the line in the css not scss.
If you click on the file, it will take you to the file with the comment telling you the mapping to the scss but this is not a practical solution.
I’ve had similar issues on other platforms and changing webpack.config.js to #inline-source-maps fixes it, but it did not work in this case. I also tried adding the config file path to the postcss.config.js as in the this article but that did not help either.
(I have WP_Debug and WP_Dev setup correctly)
Does anyone know the solution?
Would help a lot as I don’t want to get rid of sage.
Sourcemaps don’t work with Tailwind since it generates the styles based on a JS config — so they are disabled to remove any errors in the browser or console (see below for the source). You can enable them and see for yourself. It will point to locations that don’t exist in your source and wreck the mapping for any of your own custom styles. So, this isn’t an issue with Sage, but with Tailwind.
Here’s the webpack rule where sourceMaps are disabled in the webpack.config.preset.js stub:
