Question

如何在ionic2中包含第三方css？我想它可能与webpack配置相关联，但我无法在任何地方找到任何示例，有人知道吗？例如，在\n

之后添加font-awesome css文件

Answer 1

对于那些对此感兴趣的人，您可以在ionic.config.js中的构建过程中添加文件，如：

module.exports = {
    ...
    sass: {
        src: [
          'app/theme/app.+(ios|md).scss',
          'node_modules/font-awesome/scss/font-awesome.scss'
        ],
        dest: 'www/build/css',
        include: [
          'node_modules/ionic-framework',
          'node_modules/ionicons/dist/scss',
          'node_modules/font-awesome/scss'
        ]
      },
      fonts: {
          src: [
            'node_modules/ionic-framework/fonts/**/*.+(ttf|woff|woff2)',
            'node_modules/font-awesome/fonts/*.+(ttf|woff|woff2)'
          ],
          dest: 'www/build/fonts'
      }
      ...
}

这将汇编font-awesome.css下的www/build/css和www/build/fonts

下的字体

Answer 2

ionic.config.js已被弃用。

现在正确的答案是：

npm install font-awesome 然后编辑gulpfile.js以向sass和fonts任务添加选项：

gulp.task('sass', function(){
  return buildSass({
    sassOptions: {
      includePaths: [
        'node_modules/ionic-angular',
        'node_modules/ionicons/dist/scss',
        'node_modules/font-awesome/scss'
      ]
    }
  });
});

gulp.task('fonts', function(){
  return copyFonts({
    src: [
      'node_modules/ionic-angular/fonts/**/*.+(ttf|woff|woff2)',
      'node_modules/font-awesome/fonts/**/*.+(eot|ttf|woff|woff2|svg)'
    ]
  });
});

您可以在此处找到有关gulp任务的更多信息：https://github.com/driftyco/ionic-gulp-tasks。

然后您应该能够在@import "font-awesome"文件中app/theme/app.core.scss并在任何地方的项目中使用它。

Answer 3

您通常可以将css文件放在index.html页面中，只需在任何地方使用css类。默认情况下，您的组件并不是完全与外界隔离，因此您应该可以使用let say bootstrap而不会出现任何问题

在ionic2中包含第三方css

3 个答案: