汇总字体很棒的CSS？

Question

我在一个库项目中包含了字体真棒：

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

当在本地运行时，这工作正常，我可以使用字体真棒类来创建图标。

但是在我汇总项目并包含之后，我得到了错误：

找不到模块：无法解析'@fortawise-pro/css/all.min.css'

其他CSS文件被捆绑到输出CSS文件中。为什么不是那个？这是我的汇总。配置。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节点解析插件：

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'
    })
  ],
};
``