使用Ionic的第三方CSS

Question

我目前将我的Cordova + Angular2项目之一移植到Ionic 3.8 + Angular 4.1.3.我的项目使用了一些第三部分JS和CSS库,如Font awesome,Slick carousel等.在之前的版本中,我使用webpack打包我的应用程序,下面是我如何管理第三方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文件相结合,甚至调整离子.对于角度cli,是否有一个简单的解决方案？

Answer 1

在 Ionic 3 中，这实际上非常棘手，我们必须深入研究 Ionic 应用程序脚本。更简单的方法是添加一个链接到您的链接，index.html正如 Duannx 在评论中指出的那样。

好消息是：在 Ionic v4 中，将不再有 Ionic App 脚本，您将能够使用文件来管理您的自定义 CSS，如上所述angular.json。请参阅此处的官方 v4 公告。

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

npm install slick-carousel

sass.config.js1.从 Ionic App 脚本复制并编辑

转到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.链接我们的新sass.config.js内容package.json

现在让我们将新的 SASS 配置链接到我们的package.json. App Scripts 自述文件中有详细记录。添加包含以下内容的配置部分：

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

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

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

现在我们终于可以使用 导入我们的自定义CSS了@import。执行此操作的好地方是variables.scss.

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