angular-material - 如何摆脱 Angular Material 额外的样式和由它链接的 CSS 'forcefully'-6ren

angular-material - 如何摆脱 Angular Material 额外的样式和由它链接的 CSS 'forcefully'

转载作者：行者123 更新时间：2023-12-01 02:04:45

24

4

我正在使用 JSPM/SystemJS

我正在使用 Angular Material 和额外的表库(它也导入了 Angular Material)

我也很想使用 SASS ONLY 版本 Angular Material by @import 'angular-material.scss'

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

我得到多个 <style> <head> 中的标签拥有无数的 CSS 样式(?????)

我得到两个额外的 <links>在 <head>每次使用 SystemJS 导入“angular-material.js”包(一个来自我的 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 包下载时更改它时，它会在更新后或安装过程中被覆盖(这使得无法分发我的应用程序)。

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

最佳答案

这篇文章有我认为你正在寻找的答案!
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 库所有者默认不包含主题。

关于angular-material - 如何摆脱 Angular Material 额外的样式和由它链接的 CSS 'forcefully'，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33466779/

24

4

0

文章推荐： javascript - 警报框首先运行？

文章推荐： jquery - 如何在JQuery中进行算术运算？

文章推荐： jQuery 强制所有 favicon.ico 请求到正确的位置？

文章推荐： jquery - 延迟后的行动

git push --force-with-lease 与 --force
我试图理解两者之间的区别 git push --force 和 git push --force-with-lease 我的猜测是后者只推送到远程如果远程提交了本地分支没有？最佳答案 force 用
asp.net-mvc - 将文件 obj\Debug\build.force 复制到 obj\Release\Package\PackageTmp\obj\Debug\build.force 失败。找不到文件 'obj\Debug\build.force'
我在将项目发布到本地系统时收到此错误 Copying file obj\Debug\build.force to obj\Release\Package\PackageTmp\obj\Debug\bu
javascript - D3.js 中的 Spring Forces Force 定向布局？
这个例子的描述:http://bl.ocks.org/mbostock/4062045 (见下图)，声明它是“带电粒子和 Spring 的物理模拟，使相关 Angular 色更接近。” 我只是好奇该代
swift - SecIdentity + Force Cast 违规 : Force casts should be avoided. (force_cast)
请不要标记重复的问题。大家好，我正在执行 NSURLAuthenticationMethodClientCertificate，我在其中使用以下代码。如果我不使用 swiftlint，哪个代码没问
Powershell删除文件夹-force
我似乎无法删除文件/文件夹，而无需为所有人输入 [A]。我错过了什么？ Get-Childitem "C:\Users\*\AppData\Local\Temp\*" -ErrorAction S
stream - 什么是 `where .force` ？
我一直在尝试编写在 Streams 上运行的程序和它们的属性，但我觉得即使是最简单的事情我也被困住了。当我在标准库的 Codata/Streams 中查看 repeat 的定义时，我发现了一个我在 A
Symfony2 : how to force download
我正在尝试使用 symfony2 创建一个下载文件的链接。它确实下载了一个文件，但它没有用，因为它是零八位字节。我不知道如何让它工作。有人知道怎么做吗？文件位于web/uploads/documen
brute-force - 防止对MySQL的暴力攻击？
我需要为MySQLd打开网络，但是每次这样做，服务器都会被强行淘汰。一些卑鄙的密码猜测脚本开始在服务器上运行，在端口3306上打开连接并永久尝试随 secret 码。我该如何阻止这种情况的发生？对
Azure函数: Force HTTPS
Azure Functions 是否可以强制通过 HTTPS 进行连接？我没有在应用程序设置中看到它，也没有看到任何对 Azure Functions 的 web.config 的引用。最佳答案
SQL Force 显示十进制值
我正在使用 Firebird 数据库并正在尝试以下 sql，但每次它返回 0，而不是 0.61538(等等)。 SELECT (COUNT(myfield)/26) totalcount FROM m
salesforce - Force.com平台的缺点
就目前情况而言，这个问题不太适合我们的问答形式。我们希望答案得到事实、引用资料或专业知识的支持，但这个问题可能会引发辩论、争论、民意调查或扩展讨论。如果您觉得这个问题可以改进并可能重新开放，visit
javascript - force 属性始终未定义
我想要一个永远未定义的属性: var foo = {bar:undefined} 如果有人稍后尝试更改属性栏，那么它也应该导致未定义。 foo.bar = 'someValue'// foo.bar/
c# - "Forcing"符合通用约束
我有课，Target无法更改，具有通用约束。我想从没有约束的泛型类中构建该类的实例。下面演示了我想要做的事情的意图，但我意识到这段代码将无法编译并且 typeof(T).IsClass是运行时检查，通
css - "force"用户更新浏览器是个好习惯吗？
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
MATLAB:force doc命令打开指定引用HTML页面
假设我在包中编写了一个类，名为 mypackage.myclass。我已经为包和类编写了自己的 HTML 文档，并将其包含在 MATLAB 帮助浏览器中，如 the MATLAB documentat
git force 文件行在提交时结束
我们有一个多平台项目，它为几个平台生成二进制文件，比如 mac、windows、linux...是否可以强制 git 将所有文件的编码更改为某个特定平台(例如:Linux)。那么如何在每次用户提交或推
SVN Import Force 用于导入现有文件
我正在使用 MSBuild 自动为标签创建一个文本文件和一个 ZIP 文件。我的 MSBuild 项目由 CruiseControl.NET 调用. 文本文件总是latest.txt，ZIP 文件是(
payment-gateway - FORCE 在信用卡交易中做了什么？
根据我的一些 API 规范: Force to place an Auth transaction into the current batch (PostAuth) or to place a tr
python - 超集 : Where to force an autologin
我正在使用超集 0.20.4 如果我想在我的 URL 中添加一个 token 以自动登录到特定用户超集/仪表板/3?standalone=true&token=123456789 我应该在代码的哪个位
Jquery移动: Forcing refresh of content
我有一个大问题:我有一个 listview，每个项目都链接到页面 #concorsi。当我单击链接时，URL 会变为 #concorsi?numero=1，因为我正在从 JSON 中获取表单编号 1。

首页

博学

6Ren·AI

商城

angular-material - 如何摆脱 Angular Material 额外的样式和由它链接的 CSS 'forcefully'