在 ionic2 中包含第 3 方 css

Question

如何在 ionic2 中包含第 3 方 css？我想它可能与 webpack 配置有关，但我在任何地方都找不到任何示例，有人知道吗？例如，在 npm install font-awesome

之后添加 font-awesome css 文件

Answer 1

您通常可以将 css 文件放在 index.html 页面中，然后在任何需要的地方使用 css 类。默认情况下，您的组件并没有完全与外界隔离，因此您应该可以毫无问题地使用 bootstrap

Answer 2

对于那些对此感兴趣的人，您可以在 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'
      }
      ...
}

这将在 www/build/css 下编译 font-awesome.css 并在 www/build/fonts

下编译字体

Answer 3

ionic.config.js 已弃用。

现在的正确答案是：

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

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 文件中并在您的项目中的任何地方使用它。

在 ionic2 中包含第 3 方 css

Include 3rd party css in ionic2

css

ionic2