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 App脚本。更简单的方法是在Duannx的评论中为您的index.html添加一个链接。

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

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

npm install slick-carousel

1。从Ionic App脚本复制并编辑sass.config.js

转到node_modules/@ionic/app-scripts/config并复制sass.config.js文件。我将其复制到项目的根目录。然后编辑文件：将自定义CSS的路径添加到includePaths部分，例如我将路径添加到光滑轮播的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

现在，让我们在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是一个很好的选择。

可悲的是：对于光滑轮播，我们还没有完成。我们还必须复制一些字体。但这并不难，我们可以使用copy.config.js并编辑copyFonts部分来完成上述操作。

使用Ionic的第三方CSS

1 个答案: