Как справиться с неожиданной проблемой url-load в webpack4? - PullRequest
Новая
       18

Как справиться с неожиданной проблемой url-load в webpack4?

0 голосов
/ 18 апреля 2019

Я работаю над реактивным проектом с webpack4.Я добавил код импорта в свой файл js: 

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

После этого я получил ошибку ниже при компиляции.

        ERROR in ./css/waffle/waffle.scss (./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/postcss-loader/src!./node_modules/sass-loader/lib/loader.js!./css/waffle/waffle.scss)
        Module not found: Error: Can't resolve '../fonts/fontawesome-webfont.woff2?v=4.7.0' in 'TheFrontEnd/css/waffle'

Я провел некоторый поиск, и, похоже, проблема в конфигурации для разрешения пути, но я настроил webpack для использования загрузки файла woff2.Ниже приведена конфигурация загрузчика в webpack: 

module: {
            rules: [
                {
                    test: /\.js?$/,
                    exclude: /(node_modules)/,
                    loader: 'babel-loader'
                },
                {
                    test: /\.(svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    loader: 'file-loader'
                },
                {
                    test: /\.scss$/,
                    use: [
                        MiniCssExtractPlugin.loader,
                        'css-loader',
                        'resolve-url-loader',
                        'postcss-loader',
                        'sass-loader'
                    ]
                },
                {
                    test: /\.css$/,
                    use: [MiniCssExtractPlugin.loader, 'css-loader!resolve-url-loader']
                },
                {
                    test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    loader: 'file-loader?limit=10000'
                },
                {
                    test: /\.(ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                    loader: 'file-loader?name=[name].[ext]'
                },
                {
                    test: /\.html?$/,
                    use: [
                        {
                            loader: 'html-loader',
                            options: {
                                attrs: false
                            }
                        }
                    ]
                },
                {
                    test: /\.(png|jpg|gif)$/,
                    loader: 'url-loader?limit=10000'
                } // load small <10kb images into base 64 into css
            ]
        },

Этот путь ../fonts/fontawesome-webfont.woff2?v=4.7.0 является ссылкой node_modules/font-awesome/css/font-awesome.css.Как я могу заставить это работать?Кто-нибудь может увидеть что-то не так с моей конфигурацией?

1 Ответ

0 голосов
/ 18 апреля 2019

Это не проблема загрузчика, это проблема решателя.Я столкнулся с этим пару раз, но у меня никогда не было пациента, чтобы тщательно изучить его.Я подозреваю, что в его веб-пакете недостаточно хороших настроек распознавателя для .scss варианта использования.

В любом случае, вот мое быстрое исправление:

  1. Узнайте, каков точный абсолютный путь этого шрифтаfile
  2. Добавить к нему псевдоним 
webpackConfig = {
  reaolve: {
    alias: {
      'fonts/fontawesome-webfont.woff2': '/abs/to/to/that/woff2'
    ...
}
...