Webpack style-loader vs css-loader

238

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

1) CSS Loader и Style Loader - это два веб-загрузчика. Я не мог понять разницу между ними. Почему я должен использовать два загрузчика, когда они оба выполняют одну и ту же работу?

2) Что это .useable.less и .useable.css, упомянутые в вышеупомянутых файлах Readme.md?

webpack webpack-style-loader Анвеш Чека
источник
Посмотрите, как angular-cli / webpack доставляет ваши стили CSS клиенту для подробного объяснения
Макс Корецкий,

Ответы:

283

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

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

Это на самом деле ничего не делает с возвращенным CSS.

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

Они выполняют разные операции, но часто бывает полезно объединить их в цепочку, как в каналах Unix. Например, если вы используете препроцессор Less CSS , вы можете использовать

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

в

  1. Превратитесь file.lessв простой CSS с помощью загрузчика Less
  2. Разрешить все importsи url(...)с в CSS с загрузчиком CSS
  3. Вставьте эти стили на страницу с помощью загрузчика стилей
Мишель Тилли
источник
24
Подскажите, пожалуйста, что вы мене, вставив стиль в страницу? Поскольку я использую ExtractTextPlugin для CSS и в соответствии с тем, что вы написали, я не должен использовать загрузчик стилей. Кроме того, я чувствую, что использование загрузчика стилей делает мой Стиль связанным с JS, пока я не использовал плагин extract. Примечание: я использую веб-пакет. И после удаления этого загрузчика стилей все для меня не изменилось, потому что я только что сказал выше, что у меня уже есть мой CSS в отдельном файле, созданном плагином extract ..
myDoggyWritesCode
6
@ user3241111 Я думаю, что он имел в виду следующее: «Добавляет CSS в DOM путем введения <style>тега» (это скопировано из официальной документации по адресу github.com/webpack/style-loader )
exmaxx
1
Таким образом, идея заключается в том, что веб-пакет удаляет весь обработанный вами CSS и помещает его в заголовок документа, чтобы избежать HTTP-запросов на теги <link> и определения стиля url? Я предполагаю, что в этом суть. Такие вещи, как гламур и гламур, делают это также. Я уверен, что так быстрее загружается. Но я могу ошибаться.
Tamb
К importsЯ полагаю , вы имеете в виду @importдиректив. По умолчанию эта директива не объединяет импортированные правила CSS с импортером, а создает другой GETзапрос. Вы говорите, что css-loaderвернете объединенный вывод?
adi518,
1
и возвращает CSS - он возвращает JS, см. Вот так angular-cli / webpack доставляет ваши стили CSS клиенту
Макс Корецкий
55

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>уходит.

D512
источник
5
так когда я должен использовать css-loaderв отличие от raw-loader?
Рой Намир
4
Загрузчик css интерпретирует @import и url () как import / require () и разрешает их. Raw-загрузчик загружает только указанный файл.
Андрей
13

Чтобы ответить на второй вопрос «Что это за .useable.less и .useable.css, упомянутые в вышеупомянутых файлах Readme.md?», По умолчанию, когда стиль имеет значение require'd, модуль загрузчика стилей автоматически внедряет <script>тег в DOM, и этот тег остается в DOM, пока окно браузера не будет закрыто или перезагружено. Модуль style-loader также предлагает так называемый «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, имеют расширение ".usable.css", а не просто ".css", как указано выше.

chrisarnesen
источник
Этот ответ не о конфигурации Webpack.
Андрей Костер
@AndrewKosterЯ не понимаю, что ты имеешь в виду. Это ответ на вторую часть вопроса из двух частей оригинального плаката о внутренней работе и соглашениях об именах файлов модуля style-loader.
Крисарнесен
Конечно, но, как вы говорите, вопрос состоит из двух частей. Этот ответ (и принятый ответ) полностью игнорируют первую часть вопроса, которая является наиболее важной и общеприменимой частью. Единственным ответом на вопрос о том, что это за загрузчики и как их настроить, является ответ Брайана Огдена, за который никто не голосует (по какой-то причине).
Андрей Костер
Я не использую этот странный синтаксис с безумными восклицательными знаками, но мне все еще нужно знать, как настроить эти загрузчики в Webpack. Мой вариант использования кажется более распространенным, чем то, что вы все делаете с использованием синтаксиса сумасшедшего требования.
Андрей Костер