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

Question

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

1

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

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

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

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

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

url(./cf871bb3514694d3252ee1d23f71dd6c.woff2);

Тогда это работает.

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

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

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

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

Есть ли способ решить эту проблему?

Oscar 12 июнь 2018, в 20:31

Источник

Теги:

javascript

css

webpack

css-modules

css-loader

1 ответ

Ещё вопросы

Loilo · Answer 1 · 2018-06-12T18-59-00.000Z

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

Следующие настройки конфигурации webpack должны сделать трюк:

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