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.
Using yarn:
yarn add styled-jsx-url-loader --dev
Or using npm:
npm install styled-jsx-url-loader --dev
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):
config.module.rules.push({
test: /\.s?css$/,
use: [
options.defaultLoaders.babel,
{
loader: require.resolve('styled-jsx-url-loader'),
options: {},
},
{
loader: require('styled-jsx/webpack').loader,
options: {
type: 'scoped',
},
},
],
})
Type: Boolean
Default: false
Allow parsing scss code.
(It will not transform scss to css, only allow parser to parse it)
Type: String|RegExp
Default: null
Exclude urls from transformations.
Type: Boolean
Default: false
Print debug messages.
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)
MIT © Daniel Husar