在 ionic2 中包含第 3 方 css答案

【问题标题】：Include 3rd party css in ionic2在 ionic2 中包含第 3 方 css
【发布时间】：2016-06-13 23:15:33
【问题描述】：

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

【问题讨论】：

你的问题很有用，谢谢
@core114 是的，虽然与最新版本的 Ionic 完全不同
是的，先生，我用于 Ionic 3，

【解决方案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'
      }
      ...
}

这将在www/build/css 下编译font-awesome.css，在www/build/fonts 下编译字体

【讨论】：

我将字体行更改为 'node_modules/font-awesome/fonts/*.+(eot|svg|ttf|woff|woff2)' 它可以工作。

【解决方案2】：

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。

那么您应该可以在您的app/theme/app.core.scss 文件中使用@import "font-awesome" 并在您的项目中的任何地方使用它。

【讨论】：

很好，感谢您的更新。也许您可以指定它已被弃用的版本？你的链接似乎也坏了
实际上，不是 100% 确定何时更改... beta 4？
非常感谢@rfornal。正在与cropperjs 苦苦挣扎，同一段代码运行良好！

【解决方案3】：

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

【讨论】：

问题是如何包含node_modules 目录中的文件，以及如何制作它，这样我就不必手动复制我想要的文件在www 文件夹中，这会破坏构建系统。无论如何，我最终发现了如何做到这一点