Свернутый шрифт Awesome CSS?

Question

Я включаю Font Awesome в проект библиотеки с:

import '@fortawesome/fontawesome-pro/css/all.min.css';

При локальном запуске это работает нормально, и я могу использовать классы Font Awesome для создания иконок.

Но после I rollup проекта и включения я получаю сообщение об ошибке:

Модуль не найден: не удается разрешить '@ fortawesome / fontawesome- pro / css / all.min. css '

Другие файлы CSS объединяются в выходной файл css. Почему не тот? Вот мой rollup.config.js.

import babel from 'rollup-plugin-babel';
import css from 'rollup-plugin-css-only';

export default {
  input: 'src/index.js',
  output: {
    file: 'bundle.js',
    format: 'cjs'
  },

  external: [
    'react',
    'react-dom',
    'lodash',
    'moment',
    'react-router-dom',
  ],

  plugins: [
    babel({
      exclude: "node_modules/**",
      presets: ["@babel/preset-react", "@babel/preset-env"],
    }),
    css({
      output: 'bundle.css'
    })
  ],
};

Answer 1

Это, вероятно, вызвано тем, что Rollup не может разрешить спецификатор пустого модуля ('@fortawesome/fontawesome-pro...' вместо ./path/to/@fortawesome...').

Попробуйте добавить плагин @rollup/plugin-node-resolve:

import resolve from '@rollup/plugin-node-resolve';

export default {
  //...
  plugins: [
    babel({
      exclude: "node_modules/**",
      presets: ["@babel/preset-react", "@babel/preset-env"],
    }),
    resolve(),
    css({
      output: 'bundle.css'
    })
  ],
};
``