In my application, I want to use SASS and a few front-end libraries that are loaded using NPM. To setup the bundling, I need to use a tool like Webpack.
At first, I tried to find the Webpack config file that Angular-CLI uses. Later, I discovered that Angular-CLI wants you to be free from configuration. But my problem is that I need to configure SASS transpiling, etc before I can run my application, and manually running a handful of commands is really not a good idea. I usually use ng serve which as the name implies, lets me test my application + watches for changes and applies changes. What I want to do is, run a handful of scripts that execute when a change is detected in this process. How would I go about this problem?
Update:
Compiling SASS was one of the things I had to solve, which has been solved. I also want to run Autoprefixer and package some node_modules on the build. What would be the best way?
So, after hours of searching through the documentations, googling, etc., I was able to solve every single problem listed above. It was simple.
Using CSS Preprocessors
Like @NeilLunn suggested, to use SCSS or any other preprocessor, you can use:
"defaults": {
"styleExt": "scss" // or another pre-processor, or plain css itself.
}
More information about using other pre-processor's can be found here: https://github.com/angular/angular-cli/wiki/stories-css-preprocessors
Loading CSS/JS dependencies in the project
This one was pretty straightforward. You can see an example of how Bootstrap can be loaded for example here.
Using Autoprefixer
This was the most painful one to find about, but I finally found it. Turns out, all you have to do is this right here and that actually worked!