Question

我正在尝试在我的reactjs应用程序中包含字体真棒，这些是我遵循的步骤。

'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]'
                }
            }
        ]
    }
};

但是我得到了这个问题。我怎么能解决这个问题呢？

../〜/字体真棒/ CSS /字体awesome.min.css 模块解析失败：C：\ Users \ admin \ Documents \ revegator-platform \ node_modules \ font-awesome \ css \ font-awesome.min.css意外字符'@'（4：3）您可能需要适当的加载程序来处理此文件类型。

我的webpack.config.js

if(codeText == "08213");

Answer 1

显然，您在应用中支持sass，为什么不使用font-awesome 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'

'Font awesome'适当的装载机来处理

1 个答案: