导出 react-bootstrap 时如何使用 Glyphicons答案

【问题标题】：How to use Glyphicons when exporting react-bootstrap导出 react-bootstrap 时如何使用 Glyphicons
【发布时间】：2017-10-07 09:04:50
【问题描述】：

我有 2 个项目：Project1 和 Project2。

Project1 使用 react-bootstrap。 Project1 使用 react-bootstrap 的所有组件并在 react-bootstrap 组件上创建一个包装器（不要问为什么，这是必需的）。 Project2 应该使用 Project1（导出时）作为 react-bootstrap 的包装库。

项目1 -->

index.js:

import { Bootstrap } from 'bootstrap/dist/css/bootstrap.css';
...
import Glyphicon from './src/components/Glyphicon';
...
export default {
...
Glyphicon,
...
};

src/components/Glyphicon.jsx：

import React, { PropTypes } from 'react';
import { RBGlyphicon } from 'react-bootstrap';

const Glyphicon = props => (
  <RBGlyphicon
    id={props.id}
    bsClass={props.clClass}
    glyph={props.glyph}
  />
);

Glyphicon.defaultProps = {
  id: undefined,
  clClass: 'glyphicon',
  glyph: undefined,
};

Glyphicon.propTypes = {
  id: PropTypes.string,
  clClass: PropTypes.string,
  glyph: PropTypes.string.isRequired,
};

export default Glyphicon;

webpack.config.js:

const webpack = require('webpack');
const path = require('path');

    module.exports = (env = {}) => {
      const isProduction = env.production === true;
      return {
        entry: './index.js',
        output: {
          path: path.resolve(__dirname, 'dist'),
          filename: 'Project1.js',
          libraryTarget: 'umd',
          library: 'Project1',
        },
        module: {
          rules: [
            {
              test: /.(js|jsx)?$/,
              loader: 'babel-loader',
              exclude: /node_modules/,
            },
            {
              test: /\.css$/,
              loader: 'style-loader!css-loader',
            },
            {
              test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
              loader: 'url-loader?limit=10000&mimetype=application/font-woff',
            },
            {
              test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
              loader: 'url-loader?limit=10000&mimetype=application/octet-stream',
            },
            {
              test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
              loader: 'file-loader',
            },
            {
              test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
              loader: 'url-loader?limit=10000&mimetype=image/svg+xml',
            },
          ],
        },
        resolve: {
          extensions: ['.js', '.jsx'],
        },
        plugins: [
          new webpack.DefinePlugin({
            'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
          }),
          new webpack.optimize.UglifyJsPlugin(),
        ],
      };
    };

我使用 webpack 将此 Project1 导出为名为 Project1 的包，并将其复制到 src 文件夹中的 Project2 .我不复制此版本中生成的字体文件

现在问题从Glyphicons开始。

项目2-->

src/App.jsx:

import React, { Component } from 'react';
import Project1 from './Project1';
...
export default class App extends Component {
  render() {
    return (
      <div>
...
<Project1.Glyphicon glyph="camera" />Camera
...
</div>
);
}
}
export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './src/App';

ReactDOM.render(<App />, document.getElementById('root'));

index.html:

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>Demo</title>
</head>
<body>
    <div id="root">
    </div>
    <script src='/bundle.js'></script>
</body>
</html>

我使用 webpack-dev-server 构建 Project2 并在浏览器中运行。当我在 Project2 中使用 Glyphicon.jsx 时，图标不会显示在浏览器中。以下是 Chrome 浏览器控制台中显示的错误：

Chrome Browser Debug Console errors

现在我知道问题与字体有关。

即使我复制这些生成的字体文件并粘贴到 Project2 的根目录中，我仍然会遇到同样的错误。

我应该怎么做才能从Project1中导出这些字体文件，以便它们可以在Project2中使用？

【问题讨论】：

标签： fonts webpack webpack-dev-server glyphicons react-bootstrap

【解决方案1】：

无需深入了解您的项目细节。我将向您介绍如何让 Bootstrap Glypicons 显示在您的 React 应用程序上。

1- 安装包

npm install react-bootstrap --save-dev

2- 在你想要你的字形图标的所需文件中：

import Glyphicon from 'react-bootstrap/lib/Glyphicon'

3- 现在写，这里我以“搜索”图标为例：

 <span>
    <Glyphicon glyph="search"/>
 </span>

4- 当您检查 html 时，这将/应该是编译后的输出：

<span class="glyphicon glyphicon-search"></span>

5- 最后。这就是让我的图标真正显示在浏览器上的原因：

   In your css file apply the CDN:
   /* Glyphicons*/
 @import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css");

当然，我假设您已经将引导程序连接到项目的其余部分。我只解决 Glyphicon 问题。所以在你完成后，杀死并重新启动你的 webpack 以查看反映的更改。

【讨论】：

【解决方案2】：

Bootstrap 4 不支持字形图标，无论是用户 bootstrap 3 还是使用 font awesome。

bootstrap doc

【讨论】：

是的，这是我经过大量试验后得出的结论，最终放弃了使用字形图标，因为我需要 Bootstrap 4。