Question

来使用Angular Material的SASS ONLY版本

但是，当我这样做并链接我编译的app.css时，我从Angular Material获得了额外的收益：

我在<style>中获得了多个<head>个标签，其中有多种CSS样式（?????）
我使用SystemJS（一个来自我的JS，另一个来自额外的库 - 不同版本）导入每个'angular-material.js'软件包，<links>中额外<head>两个{/ 1}}

那是因为我和额外的lib我们从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并删除了垫片，但也许我的应用程序中有配置允许我使用'官方'版本？）

Answer 1

这篇文章有我认为您正在寻找的答案！ 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＆gt; 792KB angular-material.min.js 291KB＆gt; 242KB

我将要求默认情况下不会将主题包含在角度材质库所有者中。