汇总字体 很棒的 CSS？

Question

我将Font Awesome 包含在一个库项目中：

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

在本地运行时，效果很好，我可以使用 Font Awesome 类来创建图标。

但是在我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'
    })
  ],
};
``