css-loader
Advanced tools
Changelog
6.0.0 (2021-07-14)
~
is deprecated when the esModule
option is enabled (enabled by default) and can be removed from your code (we recommend it) (url(~package/image.png)
-> url(package/image.png)
, @import url(~package/style.css)
-> @import url(package/style.css)
, composes: import from '~package/one.css';
-> composes: import from 'package/one.css';
), but we still support it for historical reasons. Why can you remove it? The loader will first try to resolve @import
/url()
/etc as relative, if it cannot be resolved, the loader will try to resolve @import
/url()
/etc inside node_modules
or modules directories.file-loader
and url-loader
are deprecated, please migrate on asset modules
, since v6 css-loader
is generating new URL(...)
syntax, it enables by default built-in assets modules
, i.e. type: 'asset'
for all url()
Node.js
version is 12.13.0
webpack
version is 5
, we recommend to update to the latest version for better performanceurl
and import
options Function
type was removed in favor Object
type with the filter
property, i.e. before { url: () => true }
, now { url: { filter: () => true } }
and before { import: () => true }
, now { import: { filter: () => true } }
modules.compileType
option was removed in favor the modules.mode
option with icss
value, also the modules
option can have icss
string valuenew URL()
syntax used for url()
, only when the esModule
option is enabled (enabled by default), it means you can bundle CSS for librariesurl()
, it means you can register loaders for them, examplefalse
value for url()
now generate empty data URI (i.e. data:0,
), only when the esModule
option is enabled (enabled by default)[ext]
placeholder don't need .
(dot) before for the localIdentName
option, i.e. please change .[ext]
on [ext]
(no dot before)[folder]
placeholder was removed without replacement for the localIdentName
option, please use a custom function if you need complex logic[emoji]
placeholder was removed without replacement for the localIdentName
option, please use a custom function if you need complex logiclocalIdentHashPrefix
was removed in favor the localIdentHashSalt
optionresolve.byDependency.css
resolve options for @import
resolve.byDependency.icss
resolve CSS modules and ICSS imports (i.e. composes
/etc)modules.localIdentHashFunction
, modules.localIdentHashDigest
, modules.localIdentHashDigestLength
options for better class hashing controlling@import
.css
to resolve.extensions
, it reduces performance and in most cases it is simply not necessary, alternative you can set resolve options by dependency