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

-

  1. i using jspm/systemjs
  2. i using angular material , lib tables (which imports angular material too)
  3. i would love use sass version of angular material @import 'angular-material.scss'

but when , link compiled app.css lot angular material:

  1. i multiple <style> tags in <head> zillion of css styles (?????)
  2. i 2 <links> in <head> each import of 'angular-material.js' package systemjs (one js , 1 library - different versions)

enter image description here

that's because me , lib import js angular-material package. not asked - want app.css. so, how can rid of tags ?

i guess problem angular-material adds 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 see annoying bug not feature - makes impossible use sass version , impossible correct permanently - when change in downloaded jspm package gets overwritten after update or during install (which makes impossible distribute app).

so, question - there way permanently rid off <style> , <link> tags inserted jspm/angularmaterial use sass compiled version of styling? (already forked lib , removed shim maybe there config in app allows me use 'official' version?)

this post has answer think looking for! how disable css imports in jspm / systemjs

install angular-material using jspm while overiding shim dependancies:

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

this prevents jspm adding angular-material.css dependancy. next can either re-import angular-material.scss sass file using:

@import 'jspm_packages/github/angular/bower-material@0.11.4/angular-material.scss';

this re-import css again, css workflow. or can re-import using jspm. first install jspm css plugin:

jspm install css

then import css in using javascript:

import 'angular-material/angular-material.css!' import angularmaterial 'angular-material';

this require to compile css files using sass first. there option compile sass on fly using jspm. seems slow me:

jspm install scss=sass

and use:

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

update: angular-material includes default theme css const variable in javascript. can view code in angular-material.js @ bottom starting:

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

when loaded browser adds lots of css style tags dynamically page document. disable them need recompile angular-material using following commands:

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

then install dependancies:

cd material npm install

then go gulp/util.js , change line 53 from:

var jsprocess = series(jsbuildstream, themebuildstream() )

to be:

var jsprocess = series(jsbuildstream)

then run build process:

gulp build

then copy newly created files in dist/ folder project. reduce filesizes from:

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

i going request themes not included default angular-material library owner.


Comments

Post a Comment

Popular posts from this blog

javascript - Slick Slider width recalculation -

-
i'm trying add slide in panel on slick container css. carousel works except new width not being calculated when space has been added. recalibrate once advance next slide i'd happen each time panel opened or closed. i've tried adding both margin , padding, neither makes difference. ideas? https://jsfiddle.net/mhigley/dpf7mlpl/ html: <button type="button" id="button"><i class="fa fa-arrow-right"></i></button> <aside> <h2>slide in panel</h2> <ol> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> <li>list item</li> </ol> </aside> <main role="main"> <div class="sections"> <section> <article> <h2>first slide</h2> <p>lorem ipsum d...
Read more

jsf - PrimeFaces Datatable - What is f:facet actually doing? -

-
looking through primefaces code in app noticed following line: <f:facet name="header">#{trainsearch.traincount} trains</f:facet> it looks overriding header, makes sense, can explain me in little more detail? what happening line of code? complete code listed below: <p:datatable id = "results" value = "#{trainsearch.trains}" var = "train" rendered="#{not empty trainsearch.trains}" styleclass = "train-search-table horizontal-border"> <f:facet name="header">#{trainsearch.traincount} trains</f:facet> <p:column headertext = "train id"> <p:panelgrid columns="1" styleclass = "train-id-grid" layout = "grid"> <h:outputtext styleclass = "train-id-label" value="#{train.traini}"/> <h:outputtex...
Read more

angular2 services - Angular 2 RC 4 Http post not firing -

-
i trying fire post request app , it's not working, tried multiple ways. don't see request being fired under network tab in chrome. not sure problem is, appreciated. import { injectable } '@angular/core'; import { http, headers } '@angular/http'; @injectable() export class userservice{ private _url="users"; constructor(private _http: http){ } checkifusernameexists(username){ return this._http.get(this._url+"/"+username) .map(response => response.json()) } createuser(user){ let headers = new headers(); headers.append('content-type', 'application/json') console.log(json.stringify(user)); return this._http.post(this._url, json.stringify(user),{headers: headers}) .map(response => response.json()) } } first need capture error , solve error: this._http.post(this._url, json.stringify(user),{headers: headers}) .subscribe( ...
Read more