Is there a way to source-map styles so that edits made in Chrome Dev Tools can be persisted to a added local Workspace?
Chrome Dev Tools is showing all my styles in styles.scss
in a <style>...</style>
tag in the element inspector.
I've setup Chrome Dev Tools workspaces similar to how @vt5491 did it in their SO here: https://stackoverflow.com/a/37627935/1762493 and that is working for the .ts
files I believe but element styles don't link back to source maps in the element inspect as they've been built with ng serve into index.html
's <style>
element it seems.
- I'm running
ng serve -dev -p=8081
- and tried
ng serve -dev -p=8081 --aot=true
but got aENONET ng.factory.js missing error
- I tried putting styles in
app.component.css
versusstyles.scss
- I tried this with
ng build
but it also puts all styles into
index.html
's<style>
Is this just the way it is currently with the Angular CLI? Maybe tweaking the web-pack underneath? It seems to be adding <style>
tags per compiled stylesheet. If this is how the CLI is working currently then maybe this isn't just a question but a feature request because we are doing front-end work right, so having this working would save time.
Related to:
- How to save CSS Style changes to ANGULAR 2.0 components form within Chrome Developer Tools?
- Angular-cli not generating typescript files with –dev option
- How to debug angular 2 app using angular-cli webpack? (in WebStorm)
- SCSS SourceMap pointing to the Parent selector only.
Thanks for any advice offered.
Best Answer
When you type ng serve by default angular cli doesn't include sourcemaps files for css files but you can include it by typing this command
or
I use Angular Cli -v 1.0.3, and More information - Angular CLI special cases