额外的样式和由它

额外的样式和由它

关注
发信
关注(28)粉丝(399)

如何摆脱 Angular Material 额外的样式和由它“强力"链接的 CSS

本文介绍了如何摆脱 Angular Material 额外的样式和由它“强力"链接的 CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

  1. 我正在使用 JSPM/SystemJS
  2. 我正在使用 Angular Material 和额外的表格库(也导入了 Angular Material)
  3. 我也希望使用@import 'angular-material.scss' 的 SASS ONLY 版本 Angular Material
  1. I am using JSPM/SystemJS
  2. I am using Angular Material and extra lib for tables (which imports Angular Material too)
  3. I also would love to use SASS ONLY version of Angular Material by @import 'angular-material.scss'

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

BUT when I do that and link my compiled app.css I get a lot extra from Angular Material:

  1. 我在 中得到了多个 标签和无数的 CSS 样式(?????)
  2. 我在 <head> 中得到两个额外的 ，用于每次使用 SystemJS 导入angular-material.js"包(一个来自我的 JS一个来自额外的图书馆 - 不同的版本)
  1. I get multiple <style> tags in the <head> with zillion of CSS styles (?????)
  2. I get TWO extra <links> in the <head> for each import of 'angular-material.js' package with SystemJS (one from my JS and one from extra library - different versions)

那是因为我和我们从 JS angular-material 包中导入的额外库.这不是我想要的 - 我只想要我的 app.css.那么，我怎样才能摆脱多余的标签?

That's because me and extra lib we import from JS angular-material package. This is not what I asked for - I just want my app.css. So, how can I get rid of extra tags ?

我猜问题是 angular-material 添加到 package.json 的 JSPM 部分:

I guess the problem is that angular-material adds to package.json's JSPM section:

"shim": {
      "angular-material": {
        "deps": [
          "./angular-material.css!"
        ]
      }
    },

和 JSPM 在第一行更改 angular-material.js:

and JSPM changes angular-material.js in first lines:

"format global";
"deps ./angular-material.css!";

我个人认为这是一个非常烦人的 BUG 而非功能 - 它无法使用 SASS 版本并且无法永久更正它 - 当我在 JSPM 包下载中更改它时，它会在更新后或安装过程中被覆盖(这使得不可能分发我的应用程序).

I personally see that as an very annoying BUG not feature - it makes impossible to use SASS version and impossible to correct it permanently - when I change it in downloaded by JSPM package it gets overwritten after update OR during install (which makes impossible to distribute my app).

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

So, the question is - is there a way to permanently get rid off ALL extra <style> and <link> tags inserted by JSPM/AngularMaterial so I could use ONLY my SASS compiled version of styling? (already forked lib and removed shim but maybe there is config in my app that allows me to use 'official' version?)

推荐答案

这篇文章有我想你正在寻找的答案！如何在 JSPM/SystemJS 中禁用 CSS 导入

This post has the answer I think you are looking for!How to disable CSS imports in JSPM / SystemJS

在覆盖 shim 依赖项的同时使用 jspm 安装 angular-material:

Install angular-material using jspm while overiding the shim dependancies:

jspm install angular-material -o '{ shim: {} }'

这可以防止 jspm 添加 angular-material.css 作为依赖项.接下来，您可以使用以下方法将 angular-material.scss 重新导入到您的 SASS 文件中:

This prevents jspm from adding angular-material.css as a dependancy. Next you can then either re-import angular-material.scss into your SASS file using:

@import 'jspm_packages/github/angular/[email protected]/angular-material.scss';

这将再次重新导入所有 css，但会导入到您的 css 工作流程中.或者您可以使用 jspm 重新导入它.首先安装jspm css插件:

This will re-import all the css again, but into your css workflow. OR you can re-import it using jspm. First install the jspm css plugin:

jspm install css

然后使用 javascript 将 css 导入回来:

Then import the css back in using javascript:

import 'angular-material/angular-material.css!'
import angularMaterial from 'angular-material';

这将需要首先使用 SASS 编译 css 文件.有一个选项可以使用 jspm 即时编译 SASS.但对我来说似乎很慢:

This will require to to compile the css files using SASS first. There is an option to compile SASS on the fly using jspm. But it seems very slow to me:

jspm install scss=sass

然后使用:

import 'angular-material/angular-material.scss!'

更新:angular-material 还包含一些默认主题 css 作为 JavaScript 中的 const 变量.您可以在 angular-material.js 底部开始查看此代码:

Update: angular-material also includes some default theme css as a const variable in JavaScript. You can view this code in angular-material.js at the bottom starting:

angular.module("material.core").constant("$MD_THEME_CSS"...

当加载到您的浏览器中时，这会动态地向页面文档中添加许多 css 样式标签.要禁用它们，您需要使用以下命令自己重新编译 angular-material:

When loaded into your browser this adds lots of css style tags dynamically to the page document. To disable them you will need to recompile angular-material yourself using the following commands:

git clone https://github.com/angular/material.git

然后安装依赖:

cd material
npm install

然后转到 gulp/util.js 并将第 53 行更改为:

Then go to gulp/util.js and change line 53 from:

var jsProcess = series(jsBuildStream, themeBuildStream() )

成为:

var jsProcess = series(jsBuildStream)

然后运行构建过程:

gulp build

然后将 dist/文件夹中新创建的文件复制到您的项目中.这也将减少文件大小:

Then copy the newly created files in dist/ folder to your project. This will also reduce the filesizes from:

angular-material.js 842KB > 792KBangular-material.min.js 291KB > 242KB

angular-material.js 842KB > 792KBangular-material.min.js 291KB > 242KB

我将要求 angular-material 库所有者默认不包含主题.

I am going to request that themes are not included by default to the angular-material library owner.

这篇关于如何摆脱 Angular Material 额外的样式和由它“强力"链接的 CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-13 05:25
Powered by LMLPHP ©2024 额外的样式和由它 0.051978