2017-08-10 50 views
0

我试图在我的reactjs应用程序中包括字体真棒,这些都是我遵循的步骤。'字体真棒'适当的加载程序来处理

1. npm install --save font-awesome 

2. Import it to my jsx file 

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

3. Adding url-loader to my webpack.config.js 

      { 
       test: /\.(woff|woff2|eot|ttf)(\?.*$|$)/, 
       loader: 'url-loader?limit=100000' 
      } 

但我收到了这个问题。我该如何解决这个问题?

../~/font-awesome/css/font-awesome.min.css 模块解析失败:C:\用户\管理员\文件\ revegator平台\ node_modules \字体真棒\ CSS \字体-awesome.min.css意外字符'@'(4:3) 您可能需要一个合适的加载程序来处理此文件类型。

我webpack.config.js

'use strict'; 
let path = require('path'); 

module.exports = { 
    entry: path.resolve('./src/main.js'), 
    output: { 
     path: path.resolve('../public/js'), 
     filename: 'build.js' 
    }, 
    resolve: { 
     extensions: ['.js', '.jsx', '.json'] 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.(js|jsx)$/, 
       exclude: /node_modules/, 
       loader: 'babel-loader' 
      }, 
      { 
       test: /\.s[a|c]ss$/, 
       loader: 'style-loader!css-loader!sass-loader' 
      }, 
      { 
       test: /\.(png|jpg|gif|svg)$/, 
       loader: 'file-loader', 
       options: { 
        name: '[name].[ext]?[hash]' 
       } 
      } 
     ] 
    } 
}; 

回答

0

显然,你支持你的应用程序青菜,那么为什么不使用字体真棒SCSS资源?这应该可以让您灵活地加载所需的内容,从而减少最终的CSS大小。

请确保您有以下软件包

npm i --dev "css-loader" "file-loader" "node-sass" "sass-loader" "style-loader" "url-loader" 

更新您的webpack.config包含在组件以下装载机

{ test: /\.s[a|c]ss$/, use: [{ loader: "style-loader" }, { loader: "css-loader" }, { loader: "sass-loader" }] }, 
    { test: /\.(png|gif|jpg|cur)$/i, loader: 'url-loader', options: { limit: 8192 } }, 
    { test: /\.woff2(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff2' } }, 
    { test: /\.woff(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'url-loader', options: { limit: 10000, mimetype: 'application/font-woff' } }, 
    { test: /\.(ttf|eot|svg|otf)(\?v=[0-9]\.[0-9]\.[0-9])?$/i, loader: 'file-loader' } 

import 'font-awesome/scss/font-awesome.scss'