Menu
css-loader is the npm module that would help webpack to collect CSS from all the css files referenced in your application and put it into a string. And then style-loader would take the output string generated by the above css-loader and put it inside the <style> tags in the index.
CSS Loader being a front-end component is defined as an npm Module that collects all the CSS files referenced in the working application to help webpack and consolidate into a string. This compiles an application of a particular resource as a JavaScript module (CSS to JS file).
Webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript. You can easily write your own loaders using Node.
To be able to use CSS in your webpack app, you need to set up a new loader. Out-of-the-box, webpack only understands Javascript and JSON. With a loader, you can translate another type of file to a format that webpack understands and can work with. There are many webpack loaders and each loader has a specific purpose.
The CSS loader takes a CSS file and returns the CSS with imports and url(...) resolved via webpack's require functionality:
var css = require("css!./file.css"); // => returns css code from file.css, resolves imports and url(...)
It doesn't actually do anything with the returned CSS.
The style loader takes CSS and actually inserts it into the page so that the styles are active on the page.
They perform different operations, but it's often useful to chain them together, like Unix pipes. For example, if you were using the Less CSS preprocessor, you could use
require("style!css!less!./file.less")
to
file.less into plain CSS with the Less loaderimports and url(...)s in the CSS with the CSS loadercss-loader reads in a css file as a string. You could replace it with raw-loader and get the same effect in a lot of situations. Since it just reads the file contents and nothing else, it's basically useless unless you chain it with another loader.
style-loader takes those styles and creates a <style> tag in the page's <head> element containing those styles.
If you look at the javascript inside bundle.js after using style-loader you'll see a comment in the generated code that says
// style-loader: Adds some css to the DOM by adding a tag
For example,
<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>
That example comes from this tutorial. If you remove the style-loader from the pipeline by changing the line
require("!style-loader!css-loader!./style.css");
to
require("css-loader!./style.css");
you will see that the <style> goes away.
To answer the second question "What is this .useable.less and .useable.css mentioned in the above Readme.md files?", by default when a style is require'd, the style-loader module automatically injects a <script> tag into the DOM, and that tag remains in the DOM until the browser window is closed or reloaded. The style-loader module also offers a so-called "reference-counted API" that allows the developer to add styles and remove them later when they're no longer needed. The API works like this:
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
By convention, style sheets loaded using this API have an extension ".usable.css" rather than simply ".css" as above.
Let me answer 1) from your question. What is the difference between style-loader and css-loader? Or: what do they do?
css-loader will receive an array in Javascript
@import rules), having the file name and file content (modified) as stringscss-loader alone, then you have to do something with the strings yourself or they just increase your bundle size for nothingstyle-loader will wrap Javascript from css-loader in more Javascript
<style> elements with the CSS strings from css-loader and injects them in the DOMstyle-loader can not be used alone (you get an error), because it doesn’t read files and expects css-loader-like Javascript as inputIf you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With