styled-jsx-url-loader
Webpack loader to transform url()
to es6 imports inside the css or sass when using separate files to create styled-jsx styles.
This loader needs to be used together with styled-jsx/webpack loader.
It's similar to what css-loader does, but css-loader is incompatible with styled-jsx/webpack loader.
Installation
Using yarn:
yarn add styled-jsx-url-loader --dev
Or using npm:
npm install styled-jsx-url-loader --dev
Configuration
This loader should be executed right after styled-jsx/webpack
and before babel loader.
Since loaders are executed from last to first, usage can be like this (with next.js):
configmodulerules
Options
scss
Type: Boolean
Default: false
Allow parsing scss code.
(It will not transform scss to css, only allow parser to parse it)
exclude
Type: String|RegExp
Default: null
Exclude urls from transformations.
debug
Type: Boolean
Default: false
Print debug messages.
Caveats
Sass variables inside the urls are not supported. For example: background: url($heroImage)
.
If you need to transform urls with variables, transform your sass code first to plain css.
There is no source maps support. (PR welcome)
License
MIT © Daniel Husar