>我正在使用Angular Material和额外的lib表(也导入了Angular Material)
>我也很乐意使用@import’angular-material.scss’来使用SASS ONLY版本的Angular Material
但是,当我这样做并链接我编译的app.css时,我从Angular Material获得了额外的收益：
>我得到多个< style> < head>中的标签拥有数以万计的CSS样式(?????)
>我得到两个额外< links>在< head>中每次导入带有SystemJS的’angular-material.js’包(一个来自我的JS,另一个来自额外的库 – 不同的版本)
那是因为我和额外的lib我们从JS角度材料包导入.这不是我要求的 – 我只想要我的app.css.那么,我怎样才能摆脱额外的标签？
我想问题是angular-material添加到package.json的JSPM部分：
"shim": {
"angular-material": {
"deps": [
"./angular-material.css!"
]
}
},
和JSPM在第一行更改angular-material.js：
"format global"; "deps ./angular-material.css!";
我个人认为这是一个非常烦人的BUG而不是功能 – 它使得无法使用SASS版本并且不可能永久地纠正它 – 当我在JSPM包下载时更改它在更新后或在安装期间被覆盖(这使我无法分发应用程序).
所以,问题是 – 有没有办法永久摆脱所有额外< style>和< link>由JSPM / AngularMaterial插入的标签,所以我只能使用我的SASS编译版样式？ (已经分叉了lib并删除了垫片,但也许我的应用程序中有配置允许我使用’官方’版本？)
解决方法
How to disable CSS imports in JSPM / SystemJS
使用jspm安装角度材料,同时覆盖垫片依赖性：
jspm install angular-material -o '{ shim: {} }'
这可以防止jspm添加angular-material.css作为依赖.接下来,您可以使用以下命令将angular-material.scss重新导入SASS文件：
@import 'jspm_packages/github/angular/bower-material@0.11.4/angular-material.scss';
这将再次重新导入所有css,但进入你的css工作流程.或者您可以使用jspm重新导入它.首先安装jspm css插件：
jspm install css
然后使用javascript导入css：
import 'angular-material/angular-material.css!' import angularMaterial from 'angular-material';
这将需要首先使用SASS编译css文件.有一个选项可以使用jspm动态编译SASS.但对我来说似乎很慢：
jspm install scss=sass
然后使用：
import 'angular-material/angular-material.scss!'
更新：angular-material还包含一些默认主题css作为JavaScript中的const变量.您可以在底部的angular-material.js中查看此代码：
angular.module("material.core").constant("$MD_THEME_CSS"...
加载到浏览器后,会向页面文档动态添加大量css样式标记.要禁用它们,您需要使用以下命令自行重新编译角度材料：
git clone https://github.com/angular/material.git
然后安装依赖项：
cd material npm install
然后转到gulp / util.js并从以下位置更改第53行：
var jsProcess = series(jsBuildStream,themeBuildStream() )
成为：
var jsProcess = series(jsBuildStream)
然后运行构建过程：
gulp build
然后将dist /文件夹中新创建的文件复制到项目中.这也将减少来自的文件大小：
angular-material.js 842KB> 792KB
angular-material.min.js 291KB> 242KB
我将要求默认情况下不将主题包含在angular-material库所有者中.
