styled-jsx-url-loader v0.6.0
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):
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',
},
},
],
})
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