使用带有 Ionic 的 3rd 方 CSS

Posted 2023-03-06

【中文标题】使用带有 Ionic 的 3rd 方 CSS

【英文标题】：Use 3rd party CSS with Ionic

【发布时间】：2018-01-23 13:47:27

【问题描述】：

我目前正在将我的一个 Cordova+Angular2 项目移植到 Ionic 3.8+Angular 4.1.3。我的项目使用了一些第 3 部分 JS 和 CSS 库，例如 Font awesome、Slick carousel 等。在之前的版本中，我使用 webpack 来打包我的应用程序，下面是我管理第 3 方 css 和 JS 的方式。

.angular-cli.json

"styles": [
    "styles.css",
    "css/animate.css",
    "css/font-awesome.css",
    "css/slick.css",
    "css/slick-theme.css"
  ],
  "scripts": [
    "scripts/jquery-3.2.1.min.js",
    "scripts/slick.min.js",
    "scripts/slideout.min.js"
  ],

如何使用 Ionic 实现相同的效果？我已经浏览了在线可用的解决方案，但其中大多数建议将 css 与全局 scss 文件结合起来，甚至调整 ionic。是否有与 angular cli 一样的直接解决方案？

【问题讨论】：

就我而言，我将直接链接添加到 index.html

【参考方案1】：

在 Ionic 3 中，这实际上非常棘手，我们必须深入研究 Ionic App Scripts。正如 Duannx 在 cmets 中指出的那样，更简单的方法是添加指向您的 index.html 的链接。

好消息是：在 Ionic v4 中将不再有 Ionic 应用脚本，您将能够使用angular.json 文件管理您的自定义 CSS，如上所述。详见 v4 官方公告here。

---

如果我们想在 Ionic v3 中以正确的方式做到这一点，我们必须在通过 npm 安装我们的自定义 CSS 解决方案后执行以下操作，例如：

npm install slick-carousel

1.从 Ionic App Scripts 复制和编辑 sass.config.js

转到node_modules/@ionic/app-scripts/config 并复制sass.config.js 文件。我将它复制到我的项目的根目录。然后编辑文件：将自定义 CSS 的路径添加到 includePaths 部分，例如我添加了 slick-carousel node_module 的路径：

includePaths: [
    'node_modules/ionic-angular/themes',
    'node_modules/ionicons/dist/scss',
    'node_modules/ionic-angular/fonts',
    'node_modules/slick-carousel/slick'
  ],

2。在package.json中链接我们的新sass.config.js

现在让我们在package.json 中链接我们的新SASS 配置。这是well documented in the App Scripts readme。添加具有以下内容的配置部分：

"config": 
    "ionic_sass": "./sass.config.js"
  

正如之前指出的，我的新 sass.config.js 位于我的项目根目录中。如果您将其复制到其他地方，请确保相应地调整路径。

3.使用@import导入自定义css文件

现在我们终于可以使用 @import 导入自定义 CSS。这样做的好地方是variables.scss。

可悲的是：对于 slick-carousel，我们还没有完成。我们还必须复制一些字体。但这应该不难，我们可以像上面一样使用copy.config.js 并编辑copyFonts 部分。