Sharing Top Content from the Angular-sphere.

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

  • CSS loaderMost loaders and plugins come as separate packages so let’s install it: – npm install –save-dev css-loaderAfter we’ve got it installed we need to add it to our configuration: – module.exports = { – entry: …, – output: …, – module: { – rules: [ – { – test:…
  • You can actually see what this module is if you run: – webpack –display-modulesAnd you can see that it’s a module supplied by the css-loader: – $ webpack — display-modules – Hash: 1229210b090997ed5ae2 – Version: webpack 3.4.1 – Time: 417ms – Asset Size Chunks Chunk Names – styles.js 5.26 kB…
  • Let’s reference this file in the index.html and see if we get green color for the top level span and blue color for the header span: – head – meta charset=”UTF-8″ – titleTitle/title – script headerI am header/header – spanI am regular span outside of header/span – /bodyAnd… – Nope,…
  • Here is the gist of it: – /* 1 */ – (function (module, exports, __webpack_require__) { – exports = module.exports = “”); – exports.push([module.i, “span {\r\n color: green;\r\n}”, “”]); – }), – /* 2 */ – (function (module, exports, __webpack_require__) { – exports = module.exports = exports.push([module.i, “header span {\r\n…
  • Style loaderAgain, this one comes a separate package and need to be installed: – npm install style-loader –save-devSimilarly to the css-loader we need to add this loader to the webpack configuration: – module.exports = { – entry: …, – output: …, – module: { – rules: [ – { -…

When you generate a new Angular project and run ng new myapp you end up with the following project structure: What interests us here is the styles.css file which is supposed to be used to declare…

CSS loaderMost loaders and plugins come as separate packages so let’s install it:

npm install –save-dev css-loaderAfter we’ve got it installed we need to add it to our configuration:

module.exports = {

entry: …,

output: …,

module: {

rules: [

{

test: /\.css$/,

use: [‘css-loader’]

}

]

}We pass /\.css$/ regexp to the test property. Webpack applies that regexp to each request/file and if there’s a match the loaders from the use array are applied to the contents of the file. This regexp matches all files that end with .css.

Cool, let’s run webpack now and see what we get:

$ webpack

Hash: 5e39e00b22e7d8dbb305

Version: webpack 3.4.1

Time: 698ms

Asset Size Chunks Chunk Names

styles.js 5.25 kB 0 [emitted] styles

[1] ./styles.css 272 bytes {0} [built]

[2] 200 bytes {0} [built]

+ 1 hidden moduleIt basically says here that it generated styles.js bundle in 698 ms. This bundle includes styles.css and /app/header.css modules plus one module from the node_modules. Webpack reports all modules that come from [“node_modules”, “bower_components”, “jam”, “components” as hidden. You can actually see what this module is if you run:

webpack –display-modulesAnd you can see that it’s a module supplied by the css-loader:

$ webpack — display-modules

Hash:…

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