How to minify CSS in assets? #1232

Activity

1. karolmie1 commented on Dec 9, 2016

   

   karolmie1

   on Dec 9, 2016

   Contributor

   More actions

   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.
2. NatsuOnFire commented on Dec 9, 2016

   

   NatsuOnFire

   on Dec 9, 2016

   Author

   More actions

   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?
3. karolmie1 commented on Dec 9, 2016

   

   karolmie1

   on Dec 9, 2016

   Last edited by karolmie1

   Contributor

   More actions

   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
4. romelgomez commented on Dec 9, 2016

   

   romelgomez

   on Dec 9, 2016

   More actions

   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
5. romelgomez commented on Dec 9, 2016

   

   romelgomez

   on Dec 9, 2016

   More actions

   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;
     }
   }
   
6. romelgomez commented on Dec 9, 2016

   

   romelgomez

   on Dec 9, 2016

   More actions

   And for Font Awesome:

   #1118
7. NatsuOnFire commented on Dec 9, 2016

   

   NatsuOnFire

   on Dec 9, 2016

   Author

   More actions

   @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.
8. kodeine commented on Dec 17, 2016

   

   kodeine

   on Dec 17, 2016

   More actions

   angular2-materialize looks way better than material2 which was being used in this starter before.
9. romelgomez commented on Dec 17, 2016

   

   romelgomez

   on Dec 17, 2016

   More actions

   @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
10. PatrickJS

    closed this as completedon Sep 2, 2017