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使用字体真棒

回答

相关问题