Setup run configuration in WebStorm, AngularJS to compile SCSS

Question

I'm trying to debug an AngularJS application in WebStorm using twitter bootstrap SCSS What happens is when I Run Index.html in WebStorm it doesn't include main.css(it can't find it) because it is in .tmp folder. When I run grunt serve it works just fine because bower reads and includes .tmp folder to behave like styles folder. How do I setup WebStorm, so it will also be picked up? What kind of Run Configuration am I supposed to create in WebStorm? Should I use "Add Watcher" as well?

To reproduce run this: yo angular
[?] Would you like to use Sass (with Compass)? Yes [?] Would you like to include Twitter Bootstrap? Yes [?] Would you like to use the Sass version of Twitter Bootstrap? Yes

And try to use it with Webstorm to run this build succesfully without using grunt serve

Update I no longer use Angular nor Grunt.

Answer 1

you shouldn't use yeoman watchers along with WebStorm watchers.

you should add in before task grunt compass - this will create .tmp files and build css

checkout JetBrains videos showing how to setup WebStorm with grunt https://www.youtube.com/watch?v=8KIir6EsFPE