2

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

4

3 回答 3

3

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文件中并在你的项目中使用它。

于 2016-06-10T19:43:10.427 回答
3

对于那些对此感兴趣的人，您可以在构建过程中添加文件，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

于 2016-02-25T04:33:18.270 回答
1

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

于 2016-02-23T11:29:22.217 回答