How to minify CSS in assets?

[NatsuOnFire]

Hi,

I would like to know how to minify CSS files in assets directory?

Thanks

[karolmie1]

Are those css files loaded by webpage? If so then according to offical docs:
https://github.com/webpack/css-loader

Minification
By default the css-loader minimizes the css if specified by the module system.

[NatsuOnFire]

I have directly filled my CSS files in index.html

<link rel="stylesheet" href="assets/css/materialize.min.css">
<link rel="stylesheet" href="assets/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/style.css">

How to use css-loader on these files?

[karolmie1]

I guess you would have to add another module to build:
entry: {
app: [ helpers.root('src/main.browser')],
vendor: [helpers.root('src/vendor.browser')],
polyfills: [helpers.root('src/polyfills.browser.ts')]
css: [ css files]
},
https://webpack.github.io/docs/multiple-entry-points.html

Then they would be loaded by proper loaders, minified, and injected to your html template by HtmlWebpackPlugin

Does this solution work for you?

Actually it's more of stackoverflow question:
http://stackoverflow.com/questions/36225548/concat-and-minify-css-files-with-webpack-without-require-them

[romelgomez]

Add material

• Step 1

npm install --save @angular/material material hammerjs

• Step 2

In the file /config/head-config.common.js, Add to the link array:

    /** <link> tags for a fonts **/
    { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }

• Step 3

In the app Module /src/app/app.module.ts or in the Module where material will work add:

// Material 2
import { MaterialModule } from '@angular/material';
import 'hammerjs';

  imports: [ 
    MaterialModule.forRoot()
  ],

Resources:

1. https://github.com/angular/material2

Add sass support

• Step 1

npm install --save-dev node-sass sass-loader

• Step 2

In the file /config/webpack.common.js, Add to return object of Webpack configuration function, to module.rules array

        /*
         * To support for *.scss files
         *
         */         
        {
          test: /\.scss$/,
          exclude: /node_modules/,
          loaders: ['to-string-loader','style-loader', 'css-loader', 'sass-loader']
        }         

• Step 3

Replace in the component decorator declaration the .css files for .scss

  styleUrls: [
    './app.component.css'
  ]
  
  
  styleUrls: [
    './app.component.scss'
  ]

Ref:

1. https://github.com/AngularClass/angular2-webpack-starter/wiki/How-to-include-SCSS-in-components

[romelgomez]

In the app.component.scss add this for Material

@import '~@angular/material/core/theming/all-theme';

// NOTE: Theming is currently experimental and not yet publically released!

@include md-core();

$primary: md-palette($md-deep-purple);
$accent:  md-palette($md-amber, A200, A100, A400);

$theme: md-light-theme($primary, $accent);

@include angular-material-theme($theme);

.m2app-dark {
  $dark-primary: md-palette($md-pink, 700, 500, 900);
  $dark-accent:  md-palette($md-blue-grey, A200, A100, A400);
  $dark-warn:    md-palette($md-deep-orange);

  $dark-theme: md-dark-theme($dark-primary, $dark-accent, $dark-warn);

  @include angular-material-theme($dark-theme);
}

body {
  font-family: Roboto, 'Helvetica Neue', sans-serif;

  // Helps fonts on OSX looks more consistent with other systems
  // Isn't currently in button styles due to performance concerns
  * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  md-sidenav {
    min-width: 15%;

    [md-button] {
      width: 100%;
      position: relative;
      bottom: 0;
      margin: 24px 0;
    }
  }

  .demo-content {
    padding: 32px;
  }

  md-toolbar {
    md-icon {
      cursor: pointer;
    }

    .demo-toolbar {
      display: flex;
      justify-content: space-between;
      width: 100%;
    }
  }

  h1 {
    font-size: 20px;
  }
}

[romelgomez]

And for Font Awesome:

#1118

[NatsuOnFire]

@karolmie1
Yes, that's what I want to implement as a solution.

@romelgomez
I don't use Material but Materialize with angular2-materialize. On the other hand, I will use the solution for Font Awesome, thanks.

[kodeine]

angular2-materialize looks way better than material2 which was being used in this starter before.

[romelgomez]

@kodeine See these examples codes: https://github.com/angular/material2/tree/master/src/demo-app

Add material to angular2-webpack-starter in three steps

Also, see this project before take your decision: https://github.com/Teradata/covalent