Webpack и Sass правильно обрабатывают изображение background: url(), но затем оно не найдено при использовании с webpack-dev-server

Я использую Webpack 2 и webpack-dev-server вместе с загрузчиком Sass, фактическая конфигурация:

{
    test: /\.scss/,
    loaders: [
        "style",
        { loader: "css", query: { modules: false, sourceMap: true } },
        { loader: "resolve-url" },
        { loader: "sass", query: { sourceMap: true } }
    ]
}

Это работает довольно хорошо, и изображение, указанное в background: url(), обрабатывается веб-пакетом, а также заменяется в стиле чем-то вроде background-somehash.jpg, доступ к этому файлу можно получить, набрав http://localhost:8080/background-somehash.jpg. Это также работает, когда я предоставляю весь URL-адрес (включая локальный хост) в определении фона стиля с помощью инструментов разработчика...

Единственное, что не работает, это исходный css, созданный webpack, который выглядит как background: url(background-somehash.jpg). Я также пробовал различные URL-адреса, такие как ./, ../, ../../ или ./images/, чтобы проверить, установлен ли root как-то по-другому. Чего я не понимаю, так это того, что файл легко доступен в корне...

EDIT: При использовании вместе с extract-text-webpack-plugin, который извлекает стили в отдельный реальный файл styles.css, он работает просто отлично. Вопрос в том, почему это не работает, когда окончательный css обслуживается из пакета javascript?

ПОЯСНЕНИЕ: Все указано правильно, изображение доступно, все работает, когда я извлекаю css в отдельный файл с помощью extract-text-webpack-plugin, но не работает, когда тот же самый css обслуживается из bundle.js, на который затем ссылаются в index.html нравится <link href="blob:..." rel="stylesheet">


webpack css sass css-loader sass-loader
person tomastrajan    schedule 02.04.2016    source источник
comment
Какое отношение это имеет к Sass? Если вы не получаете скомпилированный CSS, отличный от ожидаемого, это не имеет ничего общего с Sass.   -  person cimmanon    schedule 02.04.2016
comment
Ну, дело в том, что я не знаю, я прочитал сообщение в блоге о том, что при импорте файлов sass из других файлов sass относительные пути могут быть нарушены, это также причина, по которой я использую исходные карты и resolve-url плагин, как в примере... Так что, возможно, это какое-то дерзкое взаимодействие / внутренняя работа, не уверен ...   -  person tomastrajan    schedule 02.04.2016
comment
Sass просто компилируется в CSS. Вот и все. Если ваш скомпилированный CSS содержит именно то, что вы ожидаете, то Sass не имеет ничего общего с вашей проблемой. Вы вообще знаете, что вы ожидаете от него?   -  person cimmanon    schedule 02.04.2016

Ответы (1)


arrow_upward
0
arrow_downward

Вещи, которые вы должны проверить:

Распознается ли указанное изображение веб-пакетом?

Просто удалите изображение и проверьте, не сработала ли сборка веб-пакета. Если это так, это не проблема с конфигурацией вашего загрузчика.

Проверьте запрошенный URL-адрес с помощью инструментов разработчика браузера.

Если запрос завершается с ошибкой 404:

  • Проверьте, соответствует ли output.publicPath (веб-пакет) / contentBase (webpack-dev-server) указывают на то же место. Это с точки зрения браузера (= нет абсолютных путей к файлам)

  • Если вы используете тег <base>, вам необходимо убедитесь, что он правильно заменяет базовый URL-адрес.

person Johannes Ewald    schedule 03.04.2016
comment
Ответы предназначены для ответа на вопрос. Если вы хотите попросить разъяснений, используйте комментарии, пока у вас не будет достаточно информации, чтобы окончательно ответить на вопрос. - person cimmanon; 03.04.2016
comment
Все указано правильно, изображение доступно, все работает, когда я извлекаю css в отдельный файл, используя extract-text-webpack-plugin, он просто не работает, когда тот же самый css обслуживается из bundle.js, на который затем ссылаются в index.html как <link href="blob:..." rel="stylesheet"> - person tomastrajan; 06.04.2016