webpack使用字體真棒

在我的反應應用程序我想用webpack和css加載器使用fontawesome css文件。我的配置是這樣的：webpack使用字體真棒

的WebPack配置

module: { 
    rules: [ 
     { 
     test: /\.js?$/, 
     loader: 'babel-loader', 
     options: { 
      presets: [ 
      ["es2015", { modules: false }], 
      "stage-2", 
      "react" 
      ], 
      plugins: [ 
      "transform-node-env-inline" 
      ], 
      env: { 
      development: { 
       plugins: ["react-hot-loader/babel"] 
      } 
      } 
     } 
     }, { 
      test: /\.(eot|ttf|woff2?|otf|svg|png|jpg)$/, 
      loaders: ['file'] 
     }, 
     { 
     test: /\.css$/, 
     use: [ 
      "style-loader", 
      { 
      loader: "css-loader", 
      options: { 
       modules: true, 
       sourceMap: true, 
       importLoaders: 1, 
       localIdentName: "[name]--[local]--[hash:base64:8]" 
      } 
      }, 
      "postcss-loader" // has separate config, see postcss.config.js nearby 
     ] 
     }, 
    ]

在index.js我有這樣的：

import 'font-awesome/css/font-awesome.css';

，並在渲染方法，我有這樣的：

<li><NavLink to="/dashboard" className="fa fa-bars" activeClassName="activeSidebar" 
             aria-hidden="true"></NavLink></li>

有沒有錯誤，但也沒有顯示圖標......我的錯誤是什麼？

感謝

來源

2017-04-07 Felix

解決辦法是添加css文件在我的www/index.html

然後我可以使用像這樣的css：

<div className={`row`}>

與bootstrap和fontawesome相同

來源

2017-04-08 17:55:18 Felix

您可能需要一個名稱參數添加到處理該字體文件加載程序。

如：

... 
{ 
test: /\.(eot|ttf|woff2?|otf|svg|png|jpg)$/, 
loader: 'file-loader?name=./[name].[hash].[ext]' 
}, 
...

來源

2017-04-07 12:35:59 JusMalcolm

什麼都沒有改變 – Felix

如果你使用的WebPack 2個工作，you should always add the -loader suffix after each loader's name.這裏是我的代碼部分，在我webpack.config.js正常工作：

 { 
      test: /\.(png|woff|woff2|eot|ttf|svg)$/, 
      use:[{ 
       loader: 'url-loader', 
       options:{ 
        limit: 100000, 
        name: 'assets/resources/[name].[ext]' 
       } 
      }] 
     }

我使用url-loader，但在這種情況下，它也應該與file-loader一起使用。

來源

2017-04-07 12:53:33 Sebastianb

對我而言，我將在url-loader和一些include/exclude指令的擴展名之後添加一個小圖案。

這是因爲我們想爲我們的css和導入的工具有不同的工具。

在url-loader添加的圖案是從font-awesome.css辦理進口，因爲它們看起來像：src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');

這裏是我的webpack.config.js文件的摘錄：爲我工作

{ 
    test: /\.css/, 
    loaders: [ 
     'style-loader', 
     `css-loader?${JSON.stringify({ 
     sourceMap: isDebug, 
     // CSS Modules https://github.com/css-modules/css-modules 
     modules: true, 
     localIdentName: isDebug ? '[name]_[local]_[hash:base64:3]' : '[hash:base64:4]', 
     // CSS Nano http://cssnano.co/options/ 
     minimize: !isDebug, 
     camelCase: 'dashes', 
     })}`, 
     'postcss-loader', 
    ], 
    exclude: [ 
     path.resolve(__dirname, './node_modules/font-awesome'), 
    ], 
    }, 

// ... 
    { 
    test: /\.css/, 
    loaders: [ 
     'style-loader', 
     'css-loader', 
    ], 
    include: [ 
     path.resolve(__dirname, './node_modules/font-awesome'), 
    ], 
    }, 
// ... 

{ 
    test: /\.(png|jpg|jpeg|gif|woff|woff2)(\?.*$|$)/, 
    loader: 'url-loader?limit=10000', 
},

來源

2017-04-07 12:58:08

webpack使用字體真棒

回答

相關問題