Style JSX permite el uso de preprocesadores por medio de plugins.
Primero se debe de instalar el plugin del preprocesador que se desea usar:
Finalmente, solo se debe de crear un archivo .babelrc y agregar la siguiente configuración:
{
"presets": [
[
"next/babel",
{
"styled-jsx": {
"plugins": [
"styled-jsx-plugin"
]
}
}
]
]
}
Cambiar styled-jsx-plugin por el plugin a usar.
Con esa configuración solo debes agregar el sass/postcss/less/stylus en el style jsx y todo va a funcionar automáticamente.
Ejemplo con sass:
<style jsx>{`
.menu {
z-index: 10;
position: fixed;
top: 0;
left: 0;
right: 0;
ul {
list-style: none;
a {
text-decoration: none;
color: white;
}
a:hover {
color: red;
}
}
}
`}</style>