After running yarn run start, I inspect some css I want to change. Next to the CSS rule in the console is shown a url e.g. blob:http://localhost:3002/a1f86b01-b790-455c-b218-315904e0a32f - this isn’t helpful for me to be able to find the location of that CSS.
Is this intended behaviour?
Yes am I missing something here as what you have in your screenshot is more like what I would expect to see - e.g. links to the location of the styles in the scss files. Any idea what might be the reason that for example where you have
/Users/nat/root… home.scss
I have the something like
blob:http://localhost:3002/a1f86b01-b790-455c-b218-315904e0a32f
I was just reading this topic
Developing with Yarn & Webpack, issues with error reporting and css - #10 by MWDelaney and thought it might be related
Is everything else working as expected aside from the sourcemaps?
I believe so far everything else is working as expected however, I’ve only just started exploring this version of sage in the current project I’m working on, so I’m pretty sure I will encounter further things on part of this learning curve.
Sorry, more meant is everything working as expected with the stylesheets i.e. are they compiling correctly and the changes are happening?
Yes if I change something in a sass file then it rebuilds and shows in the browser. Where is the config for the sourcemaps - perhaps that is part of the problem?
I saw
enabled: {
sourceMaps: !isProduction,
optimize: isProduction,
cacheBusting: isProduction,
watcher: !!argv.watch,
},
in config.js , perhaps I’m somehow in production mode?
config object is
{ open: true,
copy: 'images/**/*',
proxyUrl: 'http://localhost:3000',
cacheBusting: '[name]_[hash:8]',
paths:
{ root: '/Applications/MAMP/htdocs/asdf/web/app/themes/asdf',
assets: '/Applications/MAMP/htdocs/asdf/web/app/themes/asdf/resources/assets',
dist: '/Applications/MAMP/htdocs/asdf/web/app/themes/asdf/dist' },
enabled:
{ sourceMaps: true,
optimize: false,
cacheBusting: false,
watcher: true },
watch:
[ 'app/**/*.php',
'config/**/*.php',
'resources/views/**/*.php',
'resources/**/*.php',
'resources/templates/**/*.twig' ],
entry:
{ main: [ './scripts/main.js', './styles/main.scss' ],
customizer: [ './scripts/customizer.js' ] },
publicPath: '/app/themes/asdf',
devUrl: 'l.asdf.dev' }
I tried re-running npm install to check errors and there is one warning:
(node:9480) Warning: Possible EventEmitter memory leak detected. 11 SIGINT listeners added. Use emitter.setMaxListeners() to increase limit
this could be related to many things though by the look of it https://stackoverflow.com/questions/9768444/possible-eventemitter-memory-leak-detected
I Just created an entirely fresh install of bedrock with sage and I still get the same problem. E.g. after doing yarn run start and inspect my css sourcemap appears to be broken - links are e.g. blob:http://localhost:3002/a1f86b01-b790-455c-b218-315904e0a32f. I am using MAMP pro and Chrome. OMG - it works in Firefox.
Is there a reason you’re using NPM instead of Yarn? The Sage 9 docs suggest you use Yarn and there’s a yarn.lock file included in the repository that NPM wouldn’t look at so maybe that explains these weird issues you’re having.
If I remember correctly, one of the advantages of Yarn is that you are guaranteed to get the exact same versions of packages while that’s not the case with NPM…
Oh, I might have done that by force of habit as I only just moved from an older sage using gulp bower npm to the master branch of sage with yarn. Having run npm install, is that likely to have broken anything? I have otherwise followed the docs https://github.com/roots/docs/blob/sage-9/sage/theme-development-and-building.md
It might have installed some slightly different package versions and that could explain why things aren’t working as expected…
I’d suggest that you delete your node_modules directory and run yarn - hopefully that will solve it.
I have just tried that:
still same problem unfortunately. blob:http://localhost-somehash in chrome links instead of _stylesheet.scss in firefox.
That’s strange, I hoped it would be enough but maybe there’s something else still cached.
I don’t know if it has any impact but you could try deleting the .cache-loader folder and also the full dist folder (although it should be recreated each time you run a build). Then run yarn build again.
You could also try a completely fresh project and only use yarn this time.
By the way, which version of Chrome do you have? Is it up to date?
I will try deleting .cache-loader and the dist folder and run yarn build again.
version of chrome - Version 62.0.3202.89 (Official Build) (64-bit) auto updates are on.
I did try a fresh project last night but perhaps I also ran npm install without thinking about it, although I’m pretty sure I didn’t. I will doublecheck.
That didn’t fix it unfortunately. Weird that it is working fine in Firefox.
It seems to be a problem somewhere in the build process. It worked straight away for me (I’m using Laravel Valet instead of MAMP for my server but I don’t think that should make a huge difference).
Are you sure you have the very latest version of Sage from Github? How are you installing the theme? I used Composer and ran the installer:
composer create-project roots/sage myThemeName dev-master
Is that what you did too? I ask because my config.jsfile doesn’t have the paths hardcoded like yours - it is set relatively. Maybe we have slightly different versions…
That is what I did, but I’m doing it again to double check.
I did that again. Still got the issue.
Helps if I enable them in Chrome developer tools settings 
Nice find! I didn’t even know that was an option in Chrome… I guess it’s on by default because I don’t remember ever setting it!