css-loader не может разрешить URL, сгенерированные file-loader - PullRequest
Новая
       42

css-loader не может разрешить URL, сгенерированные file-loader

0 голосов
/ 12 июня 2018

У меня есть общие компоненты проекта пакета npm, который предоставляет компоненты и файл css.Файл Css создается с использованием веб-пакета и url / file-loader для разрешения шрифтов.Я могу успешно построить этот проект, и полученный CSS выглядит следующим образом: 

@font-face {
  font-family: 'MyFont';
  src: url(cf871bb3514694d3252ee1d23f71dd6c.woff2);
}

Проблема заключается в том, что я пытаюсь использовать этот CSS из другого проекта, который использует webpack и css-загрузчик с включенными css-модулями (модули:true), css-загрузчик не может разрешить сгенерированный URL: 

Module not found: Error: Can't resolve 'cf871bb3514694d3252ee1d23f71dd6c.woff2'

Если я изменю URL на: 

url(./cf871bb3514694d3252ee1d23f71dd6c.woff2);

, тогда это будет работать.

Также, если я установлю modules:false тогда все работает даже без ./

Так что похоже на то, что css-загрузчик с включенными css-модулями хочет URL-пути как относительные пути узла с ./, а не только как имя файла.

URL в исходном файле выглядит так: 

url('../assets/fonts/Myfont.woff2');

Есть ли способ, как это решить?

1 Ответ

0 голосов
/ 12 июня 2018

Похоже, вы не можете отключить разрешение в стиле Node.js в веб-пакете в целом.Однако вы можете использовать NormalModuleReplacementPlugin, чтобы вмешиваться в запросы модулей и разрешать их на лету, как относительные пути.

Следующие настройки конфигурации веб-пакета должны помочь: 

const webpack = require('webpack')
const path = require('path')

module.exports = {
  //...
  plugins: [
    // RegEx matches all requests neither starting with a dot nor a slash
    new webpack.NormalModuleReplacementPlugin(/^[^./]/, resource => {
      // Override the original request
      resource.request = path.resolve(resource.context, resource.request)
    })
  ]
};
...