'字體真棒'適當的加載程序來處理

我試圖在我的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]' 
       } 
      } 
     ] 
    } 
};

來源

2017-08-10 CraZyDroiD

顯然，你支持你的應用程序青菜，那麼爲什麼不使用字體真棒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'

來源

2017-08-10 07:10:20

'字體真棒'適當的加載程序來處理

回答

相關問題