如何在ionic2中包含第三方css?我想它可能与webpack配置相关联,但我无法在任何地方找到任何示例,有人知道吗?例如,在\n
font-awesome
css文件
答案 0 :(得分: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
答案 1 :(得分: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
并在任何地方的项目中使用它。
答案 2 :(得分:1)
您通常可以将css文件放在index.html页面中,只需在任何地方使用css类。默认情况下,您的组件并不是完全与外界隔离,因此您应该可以使用let say bootstrap而不会出现任何问题