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функціональність webpack :

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")

до

Перетворіть file.lessу звичайний CSS за допомогою менш навантажувача
Розв’яжіть всі importsта і url(...)s у CSS за допомогою завантажувача CSS
Вставте ці стилі в сторінку за допомогою завантажувача стилів

— Мішель Тіллі
джерело

24

Скажіть, будь ласка, що ви міните, вставляючи стиль на сторінку? Оскільки я використовую ExtractTextPlugin для CSS і відповідно до того, що ви написали, я не повинен використовувати завантажувач стилів. Крім того, що я відчуваю, що використання завантажувача стилів робить моє Стиль в комплекті з JS, поки я не використовую плагін витягу. Примітка. Я використовую веб-пакет. І після вилучення цього завантажувача стилів для мене речі не змінюються, тому що я лише сказав вище, що я вже маю свій CSS в окремому файлі, створеному

— витяжним

6

@ user3241111 Я думаю, що він мав на увазі це: "Додає CSS до DOM, вводячи <style>тег" (це скопійовано з офіційної документації на github.com/webpack/style-loader )

— exmaxx

1

Отже, ідея полягає в тому, що webpack знімає весь оброблений CSS і розміщує його в голові документа, щоб уникнути HTTP-запитів для тегів <link> та визначень стилю URL? Я припускаю, що в цьому справа. Такі речі, як гламур і гламур, роблять це також. Я впевнений, що швидше завантажується таким чином. Але я можу помилитися.

— Тамб

До 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 () як імпорт / вимагає () і вирішить їх. Навантажувач завантажує лише вказаний файл.

— andrew

13

Щоб відповісти на друге питання "Що це .useable.less та .useable.css, згадані у вищезазначених файлах Readme.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, мають розширення ".usable.css", а не просто ".css", як зазначено вище.

— chrisarnesen
джерело

Ця відповідь не стосується конфігурації Webpack.

— Андрій Костер

@AndrewKoster Я не розумію, що ти маєш на увазі. Це відповідь на другу частину двоскладового запису оригінального афіші про внутрішні розробки та умови іменування файлів модуля завантаження стилів.

— chrisarnesen

Звичайно, але, як ви кажете, до цього питання є дві частини. Ця відповідь (і прийнята відповідь) повністю ігнорує першу частину питання, яка є більш важливою та загальноприйнятою частиною. Єдина відповідь, яка стосується питання про те, що це за навантажувачі та як їх налаштувати, - це відповідь Брайана Огдена, за який ніхто не голосує (чомусь).

— Андрій Костер

Я не використовую жодного з цього дивного синтаксису, який вимагає симпатичних знаків оклику, але мені все одно потрібно знати, як налаштувати ці завантажувачі в Webpack. Мій випадок використання здається більш поширеним, ніж все, що ви робите з божевільним, вимагає синтаксису.

— Андрій Костер

2

Документація Webpack рекомендує поєднувати завантажувач стилів із css-loader:

https://webpack.js.org/loaders/style-loader/

— Брайан Огден
джерело