angular 6 whats for style.js in the build

Question

Peeping in the html source

of my SPA build with ng 6 using sass

I found these list of files

<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>

I'm wondering what's style.js for?

I'm importing bootstrap

in my style.scss like

(I do that because if I put bootstrap in angular.json I can't have my custom theme see variables)

@import "./assets/variables";
@import "~bootstrap/scss/bootstrap";

Answer 1

With the development build global styles are extracted to .js files whereas with the production build they are extracted to .css files. To change this default behavior use --extract-css option or it's alias -ec with the ng build command.

What is the reason for using js to extract css in dev builds?

Every file/module we want to be used in the bundle webpack expects to be a valid JavaScript module. And certainly styles.css is not a valid JavaScript module. So we need something to turn this CSS module into JS module. And this is where loaders come in. Here is what webpack docs say about loaders:

Loaders are transformations that are applied on the source code of a module. They allow you to pre-process files as you import or “load” them… Loaders can transform files from a different language (like TypeScript) to JavaScript, or inline images as data URLs.

More: This is how angular-cli/webpack delivers your CSS styles to the client

Answer 2

The style.js is all your css files that are included in your style array in angular.json file.