如何摆脱Angular Material的额外样式和与其强制链接的CSS [英] How to get rid off Angular Material extra styles and CSS linked by it 'forcefully'
问题描述
- 我正在使用JSPM/SystemJS
- 我正在为表使用Angular Material和额外的lib(也导入了Angular Material)
- 我也很乐意使用@import'angular-material.scss' 使用的仅SASS版本的Angular Material
- 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'
但是当我这样做并链接我编译的app.css时，我从Angular Material那里得到了很多好处:
BUT when I do that and link my compiled app.css I get a lot extra from Angular Material:
- 我在
<head>中得到了多个<style>标签，其中包含不计其数的CSS样式(?????) - 对于每次导入SystemJS的"angular-material.js"包，我在
<head>中都得到两个额外的<links>(一个来自我的JS，另一个来自额外的库-不同版本)
- 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)
那是因为我和我们从JS angular-material包中导入的额外lib.这不是我要的-我只想要我的app.css.那么，如何去除多余的标签?
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 ?
我想问题是角材料增加了package.json的JSPM部分:
I guess the problem is that angular-material adds to package.json's JSPM section:
"shim": {
"angular-material": {
"deps": [
"./angular-material.css!"
]
}
},
和JSPM在第一行中更改angular-material.js:
and JSPM changes angular-material.js in first lines:
"format global";
"deps ./angular-material.css!";
我个人认为这是一个非常烦人的BUG功能-无法使用SASS版本，也无法永久纠正-当我通过JSPM软件包下载更改它时，它会在更新后或安装过程中被覆盖(这使得不可能)分发我的应用).
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).
所以，问题是-有没有一种方法可以永久摆脱JSPM/AngularMaterial插入的所有其他<style>和<link>标签，因此我只能使用SASS编译的样式版本?(已经分叉的lib并删除了垫片，但也许我的应用程序中有配置允许我使用官方"版本?)
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?)
推荐答案
这篇文章有我认为您正在寻找的答案！ 如何在JSPM/SystemJS中禁用CSS导入
This post has the answer I think you are looking for! How to disable CSS imports in JSPM / SystemJS
在覆盖垫片相关性的同时，使用jspm安装角度材料:
Install angular-material using jspm while overiding the shim dependancies:
jspm install angular-material -o '{ shim: {} }'
这可以防止jspm将angular-material.css添加为依赖项.接下来，您可以使用以下方法将angular-material.scss重新导入到您的SASS文件中:
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';
这将再次重新导入所有CSS，但是将其导入到您的CSS工作流程中.或者，您可以使用jspm重新导入它.首先安装jspm css插件:
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
然后使用javascript导入css:
Then import the css back in using javascript:
import 'angular-material/angular-material.css!'
import angularMaterial from 'angular-material';
这将需要首先使用SASS编译css文件.有一个选项可以使用jspm即时编译SASS.但是对我来说似乎很慢:
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
然后使用:
import 'angular-material/angular-material.scss!'
更新:Angular-material还包含一些默认主题css作为JavaScript中的const变量.您可以在底部开始的angular-material.js中查看此代码:
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"...
当加载到浏览器中时，这会向页面文档动态添加许多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
然后安装依赖项:
cd material
npm install
然后转到gulp/util.js并将第53行更改为:
Then go to gulp/util.js and change line 53 from:
var jsProcess = series(jsBuildStream, themeBuildStream() )
成为:
var jsProcess = series(jsBuildStream)
然后运行构建过程:
gulp build
然后将dist/文件夹中的新创建的文件复制到您的项目中.这还将减少以下文件的大小:
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
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.
这篇关于如何摆脱Angular Material的额外样式和与其强制链接的CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
