如何“强制”摆脱 Angular Material 额外的样式和由它链接的 CSS答案

【问题标题】：How to get rid off Angular Material extra styles and CSS linked by it 'forcefully'如何“强制”摆脱 Angular Material 额外的样式和由它链接的 CSS
【发布时间】：2016-02-01 16:43:01
【问题描述】：

我正在使用 JSPM/SystemJS
我正在为表格使用 Angular Material 和额外库（也导入 Angular Material）
我也希望使用 @import 'angular-material.scss' 的 Angular Material 的 SASS ONLY 版本

但是当我这样做并链接我编译的 app.css 时，我从 Angular Material 中获得了很多额外的东西：

我在 <head> 中获得了多个 <style> 标记，其中包含无数 CSS 样式 (?????)
每次使用 SystemJS 导入“angular-material.js”包时，我会在 <head> 中获得两个额外的 <links>（一个来自我的 JS，一个来自额外库 - 不同版本）

那是因为我和我们从 JS angular-material 包中导入的额外库。这不是我要求的——我只想要我的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软件包下载更改它时，它会在更新后或安装期间被覆盖（这使得不可能分发我的应用程序）。

所以，问题是 - 有没有办法永久摆脱 JSPM/AngularMaterial 插入的所有额外的 <style> 和 <link> 标签，这样我就可以只使用我的 SASS 编译版本的样式？（已经分叉 lib 并删除了 shim，但也许我的应用程序中有配置允许我使用“官方”版本？）

【问题讨论】：

我有同样的问题，但下面的答案没有任何区别。
1.0.0-rc7 已更正，不需要下面的解决方法（对于额外的 CSS 链接但不是额外的样式标签）

标签： angular-material jspm

【解决方案1】：

这篇文章有我认为您正在寻找的答案！ How to disable CSS imports in JSPM / SystemJS

使用 jspm 安装 angular-material，同时覆盖 shim 依赖项：

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 样式标签。要禁用它们，您需要使用以下命令自己重新编译 angular-material：

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 库所有者默认不包含主题。

【讨论】：

答案解决问题没有。 2（由jspm shim引起的额外链接）和更正的版本1.0.0-rc7甚至不需要这个解决方法）但我仍然不知道如何解决问题。 2 : 中的多个
好点，我知道如何删除它们，请参阅上面我编辑的帖子！
我在此处的库中提交了更改此内容的请求：github.com/angular/material/issues/6277
非常感谢！希望他们在下一个版本中改变它
我也遇到了同样的问题，我正在使用 grunt，如何使用 grunt @Kim T 删除这些标签