How to get rid off Angular Material extra styles and CSS linked by it 'forcefully'

I am using JSPM/SystemJS
I am using Angular Material and extra lib for tables (which imports Angular Material too)
I also would love to use SASS ONLY version of Angular Material by @import 'angular-material.scss'

BUT when I do that and link my compiled app.css I get a lot extra from Angular Material:

I get multiple <style> tags in the <head> with zillion of CSS styles (?????)
I get TWO extra <links> in the <head> for each import of 'angular-material.js' package with SystemJS (one from my JS and one from extra library - different versions)

That's because me and extra lib we import from JS angular-material package. This is not what I asked for - I just want my app.css. So, how can I get rid of extra tags ?

I guess the problem is that angular-material adds to package.json's JSPM section:

"shim": {
      "angular-material": {
        "deps": [
          "./angular-material.css!"
        ]
      }
    },

and JSPM changes angular-material.js in first lines:

"format global";
"deps ./angular-material.css!";

I personally see that as an very annoying BUG not feature - it makes impossible to use SASS version and impossible to correct it permanently - when I change it in downloaded by JSPM package it gets overwritten after update OR during install (which makes impossible to distribute my app).

So, the question is - is there a way to permanently get rid off ALL extra <style> and <link> tags inserted by JSPM/AngularMaterial so I could use ONLY my SASS compiled version of styling? (already forked lib and removed shim but maybe there is config in my app that allows me to use 'official' version?)

This post has the answer I think you are looking for! How to disable CSS imports in JSPM / SystemJS

Install angular-material using jspm while overiding the shim dependancies:

jspm install angular-material -o '{ shim: {} }'

This prevents jspm from adding angular-material.css as a dependancy. Next you can then either re-import angular-material.scss into your SASS file using:

@import 'jspm_packages/github/angular/[email protected]/angular-material.scss';

This will re-import all the css again, but into your css workflow. OR you can re-import it using jspm. First install the jspm css plugin:

jspm install css

Then import the css back in using javascript:

import 'angular-material/angular-material.css!'
import angularMaterial from 'angular-material';

This will require to to compile the css files using SASS first. There is an option to compile SASS on the fly using jspm. But it seems very slow to me:

jspm install scss=sass

And then use:

import 'angular-material/angular-material.scss!'

Update: angular-material also includes some default theme css as a const variable in JavaScript. You can view this code in angular-material.js at the bottom starting:

angular.module("material.core").constant("$MD_THEME_CSS"...

When loaded into your browser this adds lots of css style tags dynamically to the page document. To disable them you will need to recompile angular-material yourself using the following commands:

git clone https://github.com/angular/material.git

Then install dependancies:

cd material
npm install

Then go to gulp/util.js and change line 53 from:

var jsProcess = series(jsBuildStream, themeBuildStream() )

to be:

var jsProcess = series(jsBuildStream)

Then run the build process:

gulp build

Then copy the newly created files in dist/ folder to your project. This will also reduce the filesizes from:

angular-material.js 842KB > 792KB angular-material.min.js 291KB > 242KB

I am going to request that themes are not included by default to the angular-material library owner.

Recommended topics

Hot tags