如何摆脱 Angular Material 额外样式和 CSS 链接 'forcefully'

Question

我正在使用 JSPM/SystemJS
我正在使用 Angular Material 和表的额外库（它也导入 Angular Material）
我也 想使用 @import 'angular-material.scss'

的 Angular Material 的 SASS 唯一版本

但是当我这样做时 link 我编译的 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 但也许我的应用程序中有配置允许我使用 'official' 版本？）

Answer 1

这个 post 有我认为您正在寻找的答案！

使用 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 中的常量变量。您可以在底部开始的 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 库所有者默认不包含主题。

如何摆脱 Angular Material 额外样式和 CSS 链接 'forcefully'

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

angular-material

jspm