如何在 Ionic 4 中导入自定义 css 和 js

Question

我在 ionic 中为我的应用程序使用自定义主题。但它有一些 css 和 javascript 依赖关系，除了 bootstrap。你能帮我如何将这些库导入我的应用程序吗？此致

Answer 1

如果您尝试将 Bootstrap 导入您的项目，听起来您可能缺少一些 Angular 用法理论。

它使用一组特定的类，它们 out-of-the-box 与 Angular / Ionic 不兼容。

Ionic 将为您提供一组 cross-device 样式基线，因此您应该真正使用 Ionic 来构建他们的样式，而不是试图与另一个系统抗争。

但是，要回答您的问题：

导入CSS

您可以像这样编辑 app.scss 和导入包中的参考文件：

@import '~@swimlane/ngx-datatable/release/assets/icons';

注意开头的 ~，然后是包名称，然后是文件路径。您不需要将 .css 或 .scss 放在末尾，但如果您愿意，也可以。

正在导入 JS

我不确定执行此操作的最佳方法，但您可以通过编辑 index.html.

将脚本包含在 <head> 标记中

虽然这不是真正完成的事情，但听起来您误解了 Angular/Ionic 的工作方式。

它基于构建 Web 组件，您让 Angular 管理实际直播 html。您编写的代码是 TypeScript，它与设置数据模型的各种 API 进行交互，然后让 Angular 生成实际脚本。

Answer 2

有用于加载异步 JavaScript 文件的库。 https://www.npmjs.com/package/scriptjs

安装包：

npm i scriptjs

然后像下面这样在任何地方使用它：

import { get } from 'scriptjs';

ngOnInit() {

    get("assets/js/searchEmp.js", () => {
        getSerchInspContext = this;
        loadSearchEmp();
    });}`

或

您可以简单地使用 jquery 方法在 header.

中添加或删除脚本标签

要添加 .js 文件，请在 ngOnInit() 下调用以下行：

$('head').append('<script async src="assets/js/search.js"></script>');

删除 .js 文件：

document.querySelector('script[src="assets/js/search.js"]').remove();

如何在 Ionic 4 中导入自定义 css 和 js

How to import custom css and js in Ionic 4

ionic-framework

ionic4

导入CSS

正在导入 JS