如何在出口時使用Glyphicons react-bootstap

我有2個項目：Project1和Project2。如何在出口時使用Glyphicons react-bootstap

Project1使用react-bootstrap。 Project1使用react-bootstrap的所有組件，並在react-bootstrap組件上創建一個包裝器（不要問爲什麼，這是必需的）。 Project2應該使用Project1（導出時）作爲react-bootstrap的包裝庫。

PROJECT1 - >

index.js：

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

SRC /組件/ 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(), 
     ], 
     }; 
    };

我導出此PROJECT1爲使用的WebPack稱爲PROJECT1捆綁，並在Project2中在SRC文件夾複製。我不抄在這個版本

現在的問題與Glyphicons開始產生的字體文件。

Project2的 - >

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-服務器打造Project2的，並在瀏覽器中運行。當我在Project2中使用Glyphicon.jsx時，圖標不會顯示在瀏覽器中。這裏是一個在Chrome瀏覽器控制檯顯示錯誤：

Chrome Browser Debug Console errors

現在我知道這個問題是關係到字體。

即使我複製這些生成的字體文件，並在根粘貼Project2的，我仍然得到同樣的錯誤。

我應該怎麼做這些字體文件從PROJECT1出口，使他們能夠在Project2中使用嗎？

來源

2017-05-09 Tushar Gupta

Bootstrap 4不支持字形圖標，無論是用戶引導程序3還是使用字體真棒。

bootstrap doc

來源

2017-06-22 07:17:42

是的，這是我大量的試驗後想通，終於放棄了對使用的字形圖標，因爲我需要引導4。 –

沒有深入到你的項目的細節。我將向您介紹如何讓Bootstrap Glypicons顯示在您的React應用程序中。

1 - 安裝包

npm install react-bootstrap --save-dev

2-在所需的文件，您希望您glyphicon：

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

3-現在寫，這裏我用 '搜索' 圖標爲例：

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

當你檢查你的HTML 4-，這將/應該是編譯後的輸出：

<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");

當然，我假設你已經引導連接到你的項目的其餘部分。我只處理字形問題。所以完成後，殺死並重新啓動webpack以查看反映的更改。

來源

2017-05-12 13:32:42 tonkihonks13

如何在出口時使用Glyphicons react-bootstap

回答

相關問題