angular-material – 如何摆脱Angular Material额外的样式和由它

发布时间：2020-12-17 17:15:18 所属栏目：安全来源：网络整理

导读：我正在使用JSPM / SystemJS 我正在使用Angular Material和额外的lib表(也导入了Angular Material) 我也很乐意使用@import’angular-material.scss’来使用SASS ONLY版本的Angular Material 但是,当我这样做并链接我编译的app.css时,我从Angular Material获得

>我正在使用JSPM / SystemJS
>我正在使用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,另一个来自额外的库 – 不同的版本)

enter image description here

那是因为我和额外的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库所有者中.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!