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

Question

1. I am using JSPM/SystemJS
2. I am using Angular Material and extra lib for tables (which imports Angular Material too)
3. I also would love to use S

Answer 1

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/bower-material@0.11.4/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.