使用Webpack在项目中添加超棒的字体

Question

I've bootstrap template and I'm trying to put this to FountainJS . I included all scss files from template and it's ok. Now i need to include eg font-awesome, so i used npm install font-awesome --save and add to index.js require('font-awesome'); but it's still not available in project

My src/index.js file:

var angular = require('angular');

var techsModule = require('./app/techs/index');
require('angular-ui-router');
var routesConfig = require('./routes');

var main = require('./app/main');
var header = require('./app/header');
var footer = require('./app/footer');

require('./index.scss');
require('font-awesome');

angular
  .module('app', [techsModule, 'ui.router'])
  .config(routesConfig)
  .component('app', main)
  .component('fountainHeader', header)
  .component('fountainFooter', footer);

Answer 1

I believe that CommonJs does not know how to load font-awesome . If you take a look at the Font Awesome package.json it does not have main property which is used to find a file to load. Instead there is a property style . If you look at the official package.json explanation you would not be able to find style property anywhere. You can find similar questions in StackOverflow about style property

I believe your best bet is to require a specific file from the node_module directory. Taking an assumption that src/ folder located in your root app folder

require('../node_modules/font-awesome/css/font-awesome.css');
// or
require('../node_modules/font-awesome/css/font-awesome.min.css');