Webpack style-loader vs css-loader

У меня есть два вопроса.

1) УСБ-погрузчик и Загрузчика Стиль два загрузчика webpack. Я не мог понять разницу между обоими. Почему я должен использовать два погрузчика, когда они оба выполняют одну и ту же работу?

2) Что это .пригодный.и меньше .пригодный.в CSS, в указанных выше сведений.MD файлы?

3 176
webpack webpack-style-loader

3 ответа:

загрузчик CSS берет CSS-файл и возвращает CSS с imports и url(...) разрешено через webpack require функции:

var css = require("css!./file.css");
// => returns css code from file.css, resolves imports and url(...)

на самом деле это не сделать что-нибудь с возвращенным CSS.

загрузчик стилей берет CSS и фактически вставляет его на страницу, чтобы стили были активны на странице.

они выполняют различные операции, но часто полезно связывать их вместе, как Unix-каналы. Например, если вы используете чем меньше препроцессор CSS, вы могли бы использовать

require("style!css!less!./file.less")

до

  1. поворот file.less в простой CSS с меньшим загрузчиком
  2. разрешить все imports и url(...)s в CSS с загрузчиком CSS
  3. вставьте эти стили на страницу с помощью загрузчика стилей
217

css-loader читает в файле css в виде строки. Вы можете заменить его на raw-loader и получить тот же эффект во многих ситуациях. Поскольку он просто читает содержимое файла и ничего больше, он в основном бесполезен, если вы не свяжете его с другим загрузчиком.

style-loader берет эти стили и создает <style> тег на странице <head> элемент, содержащий эти стили.

если вы посмотрите на JavaScript внутри bundle.js после использования style-loader вы увидите комментарий в сгенерированный код, который говорит

/ / style-loader: добавляет css в DOM, добавляя тег

например,

<html>
    <head>
        <!-- this tag was created by style-loader -->
        <style type="text/css">
            body {
                background: yellow;
            }
        </style>
    </head>
    <body>
        <script type="text/javascript" src="bundle.js" charset="utf-8"></script>
    </body>
</html>

этот пример исходит от в этом уроке. Если вы удалите style-loader из трубопровода путем изменения строки

require("!style-loader!css-loader!./style.css");

до

require("css-loader!./style.css");

вы увидите, что <style> уходит.

30

чтобы ответить на второй вопрос "Что это такое .пригодный.и меньше .пригодный.в CSS, в указанных выше сведений.MD файлы?"по умолчанию, когда стиль require'd, модуль загрузчика стилей автоматически вводит <script> тег в DOM, и этот тег остается в DOM, пока окно браузера не будет закрыто или перезагружено. Модуль загрузчика стилей также предлагает так называемый" API с подсчетом ссылок", который позволяет разработчику добавлять стили и удалять их позже, когда они больше не нужны. API работает вот так:

const style = require('style/loader!css!./style.css')
// The "reference counter" for this style starts at 0
// The style has not yet been injected into the DOM
style.use()  // increments counter to 1, injects a <style> tag
style.use()  // increments counter to 2
style.unuse()  // decrements counter to 1
style.unuse()  // decrements counter to 0, removes the <style> tag

по соглашению, таблицы стилей, загруженные с помощью этого API, имеют расширение".годный.css" а не просто ".css " как и выше.

9