How to get rid off Angular Material extra styles a

2019-02-18 09:53发布

站内问答 / 后端开发
1010 1 5

  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 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:

  1. I get multiple <style> tags in the <head> with zillion of CSS styles (?????)
  2. 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)

enter image description here

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?)

1条回答
狗以群分
2楼-- · 2019-02-18 10:33

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.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)