Next.js: Trabajar con archivos css y scss externos
Es un problema redundante, lo sé, pero abrí este problema intencionalmente. Son tres días que estoy configurando una plantilla de next.js (con redux, redux-saga, ...) y son dos días que estoy atascado en la configuración de carga de archivos css y scss externos. He comprobado los ejemplos de hoja de estilo global y hoja de estilo de ámbito y postcss , pero cada uno de ellos tiene problemas importantes mencionados en números anteriores. He visto demasiados problemas abiertos y cerrados que están resolviendo este problema con hacks ... Creo que es una buena idea que en lugar de dejar el problema para encontrar la mejor solución, resuélvalo con las soluciones actuales disponibles hasta encontrar una mejor. ¡Porque muchos tienen este problema ahora y quieren verlo resuelto ahora!
arefaslani
Todos 38 comentarios
Estoy de acuerdo, solo styled-jsx tiene soporte limpio (incluida la recarga en caliente) y eso es lo que me impide usar Next.js para cualquier cosa, excepto cuando necesito un prototipo rápido.
Creo que la solución a los problemas de alcance de CSS de los módulos CSS es mucho más limpia, además, con los módulos CSS todavía es posible pasar clases a componentes secundarios (intente poner una clase no global en un SVG importado con babel-plugin-inline-react-svg con styled-jsx).
Eso y prefiero tener archivos .css estandarizados para evitar el bloqueo del marco tanto como sea posible y archivos CSS externos en producción para el almacenamiento en caché (y para hacer que los polyfills de MQ como Respond.js funcionen si tienes la mala suerte de todavía tengo que admitir IE8).
CrocoDillon
en 22 oct. 2017
Masivo +1
Es una gran frustración que algo tan simple como css / scss externo sea casi imposible de lograr con next.js, lo que lo vuelve inútil para el 90% de mis aplicaciones.
Estoy trabajando con bootstrap y necesito una configuración en la que haya una importación css de bootstrap global, con la adición de css de ámbito externo.
israelidanny
en 25 oct. 2017
Si bien nos las arreglamos para hacer funcionar el lápiz óptico externo con el estilo jsx 1 (paquete web para manejar la compilación), tuvimos dificultades para resolverlo en el estilo jsx 2 desde que se introdujo el cambio radical en el manejo de archivos css separados.
Enfoque actual:
import ComponentStyles from './footer.styl';
...
<style jsx>
{ComponentStyles}
</style>
Sería genial ver https://github.com/zeit/next.js/tree/master/examples/with-styled-jsx-scss trabajando con archivos scss externos.
ilionic
en 30 oct. 2017
Pasamos por la misma prueba al configurar el entorno.
Finalmente, nos conformamos con una hoja de estilo global con scss + post css con lost-grid.
La recarga en caliente funciona, así que aunque no es una solución ideal (debido a que la hoja de estilo global se carga de una vez), es un buen compromiso.
Dependencias
"autoprefixer": "^7.1.6",
"babel-plugin-module-resolver": "^2.7.1",
"babel-plugin-wrap-in-js": "^1.1.1",
"node-sass": "^4.5.3",
"sass-loader": "^6.0.6",
"pixrem": "^4.0.1",
"postcss-easy-import": "^3.0.0",
"postcss-loader": "^2.0.8"
En package.json
...
"postcss": {
"plugins": {
"lost": {},
"postcss-easy-import": {
"prefix": "_"
},
"autoprefixer": {},
"pixrem": {}
}
}
...
En next.config.js
webpack: (config, { dev }) => {
config.module.rules.push(
{
test: /\.(css|scss)/,
loader: 'emit-file-loader',
options: {
name: 'dist/[path][name].[ext]'
}
}
,
{
test: /\.css$/,
use: ['babel-loader', 'raw-loader', 'postcss-loader']
}
,
{
test: /\.s(a|c)ss$/,
use: ['babel-loader', 'raw-loader', 'postcss-loader',
{ loader: 'sass-loader',
options: {
includePaths: ['styles', 'node_modules']
.map((d) => path.join(__dirname, d))
.map((g) => glob.sync(g))
.reduce((a, c) => a.concat(c), [])
}
}
]
}
)
return config
}
En pages/_document.js
...
import stylesheet from 'styles/main.scss'
...
<Head>
<style dangerouslySetInnerHTML={{ __html: stylesheet }} />
</Head>
...
Y luego puede administrar sus estilos a partir de /styles/main.scss
Espero eso ayude
steeeeee
en 14 nov. 2017
Mi problema con cada uno de estos dos ejemplos de estilo ( with-global-stylesheet y with-scoped-stylesheets-and-postcss ) es que ninguno de ellos es fácil de integrar con las pruebas de Jest y Snapshot con CSS en la instantánea. Ha habido personas que lograron que Jest funcionara con Webpack, pero eso se logró omitiendo específicamente el CSS.
Ejecutar un archivo de preprocesador babel-jest como se describe en esta respuesta SO parece un truco tan malo.
Parece obtener CSS externo, ya que with-global-stylesheet debe usar Webpack, pero para usar Jest no puede confiar en Webpack, solo en Babel.
¿Alguien tiene ideas en este espacio?
jthegedus
en 14 nov. 2017
Me enfrento a un problema similar. Soy nuevo en nextjs y no puedo hacer que el ejemplo "with-external-scoped-css" funcione correctamente. A veces, mi css está cargado y otras no. No sé si es el mismo tema del que estás hablando.
anacicconi
en 14 nov. 2017
Se resolvieron problemas de estilos externos con este cargador https://github.com/coox/styled-jsx-css-loader
ilionic
en 17 nov. 2017
@ilionic He comprobado tu solución. ¡Es genial! Gracias :)
arefaslani
en 18 nov. 2017
@arefaslani No creo que este problema esté cerrado.
A partir de HTTP v1, sigue siendo un impuesto de rendimiento horrible para que se carguen toneladas de CSS, aumenta drásticamente el tiempo para dibujar por primera vez.
El soporte de estilo externo adecuado permitiría importar CSS y dar como resultado una no una línea ...
Also, this suggestion doesn't resolve use cases where a CSS framework like bootstrap needs to be included from node_modules. Including Bootstrap as an inline CSS on every page would be horrible. And would negate the benefits of browser caching, e.t.c
In short, I really don't think this issue can be closed... It's still very much an ongoing problem.
israelidanny
en 19 nov. 2017
@israelidanny Sé lo que quieres decir con bootstrap, no es una solución
ilionic
en 19 nov. 2017
@ilionic Entiendo lo que estás diciendo, pero aún así, tener toneladas de CSS en línea es malo para el rendimiento (específicamente el tiempo hasta el primer fotograma). Tuve bastantes proyectos en los que optimizamos mucho para eso.
Es una pena perder todo eso, especialmente teniendo en cuenta el hecho de que podemos tener DOM renderizado por el servidor.
¿Quizás cerrar este problema, pero abrir uno nuevo, específicamente para una solución que nos permita vincular CSS externo?
Sería extraño ignorar una práctica de desarrollo claramente prevalente.
israelidanny
en 19 nov. 2017
@israelidanny está de acuerdo, todavía estamos luchando con el rendimiento de CSS y, sin grandes reescrituras, no está claro cómo resolverlo, por lo que este problema es más profundo. ¿Probablemente styled-jsx es un repositorio más relevante en este caso?
ilionic
en 19 nov. 2017
@ilionic hmm, no veo qué tan styled-jsx repo sería el lugar correcto.
El problema no es con ellos, el problema es habilitar la compatibilidad con next.js de archivos css externos, que pueden o no tener nada que ver con styled-jsx.
¿Qué piensas?
israelidanny
en 19 nov. 2017
@israelidanny No fue la mejor solución, pero de todos modos funciona. Pero usted está en lo correcto. Tener todo el CSS en línea en cada página sin almacenamiento en caché no es la mejor solución. También estoy de acuerdo contigo en esta parte:
El problema no es con ellos, el problema es habilitar la compatibilidad con next.js de archivos css externos, que pueden o no tener nada que ver con styled-jsx.
y absolutamente en desacuerdo con @ilionic en:
Probablemente styled-jsx sea un repositorio más relevante en este caso
arefaslani
en 19 nov. 2017
Logré una solución con el cargador styled-jsx / css . Puede ver el código de https://github.com/P233/nextjs-with-scss
Sin embargo, noté que los archivos scss @import ed no se ven y no activan la recarga en caliente, lo que realmente me frustra.
P233
en 8 dic. 2017
Creé https://github.com/sheerun/extracted-loader para recargar en caliente archivos de hojas de estilo extraídas. Funciona bastante bien incluso para el desarrollo, por lo que dangerouslySetInnerHTML no es necesario.
Lo usas como tal:
config.module.rules.push({
test: /\.css$/,
use: ['extracted-loader'].concat(ExtractTextPlugin.extract({
/* Your configuration here */
}))
})
config.plugins.push(new ExtractTextPlugin('index.css'))
sheerun
en 9 dic. 2017
@sheerun , gracias, pero ¿cómo
psycura
en 11 dic. 2017
No inyecta, extrae todo con ExtractTextPlugin y escribe lo siguiente:
<Head>
<link rel='stylesheet' type='text/css' href="/static/index.css" />
</Head>
en tus componentes algo como
import './styles.scss'
debería ser suficiente
sheerun
en 11 dic. 2017
ok, pero ahora tengo un error:
./components/Home/Home.js
Módulo no encontrado: Error: No se puede resolver 'css-loader' en 'D: \ Sites \ work \ VisualProposal'
@ ./components/Home/Home.js 13: 0-22
@ ./pages?entry
@ multi ./pages?entry
mi componente Home.js:
import { observer } from 'mobx-react';
import './Home.scss'
import MainSection from './MainSection/MainSection'
import Sections from './Sections/Sections';
import Features from './Features/Features'
import Pricing from './Pricing/Pricing';
import Footer from './Footer/Footer'
const Home = () => {
return (
<div className="Home">
<MainSection/>
<Sections/>
<Features/>
<Pricing/>
<Footer/>
</div>
)
};
export default observer ( Home );
mi next.config.js:
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
webpack: function ( config, { dev } ) {
config.module.rules.push({
test: /\.(sa|sc|c)ss$/,
use: ['extracted-loader'].concat(ExtractTextPlugin.extract({
use: [
"babel-loader",
{
loader: 'css-loader',
options: {
url: true,
minimize: !dev,
sourceMap: dev,
importLoaders: 2
}
},
{
loader: 'postcss-loader',
options: {
sourceMap: dev,
plugins: [
require('autoprefixer')({
/* options */
})
]
}
},
{
loader: 'sass-loader',
options: {
sourceMap: dev
}
}
]
}))
});
config.plugins.push(new ExtractTextPlugin('index.css'));
if ( config.resolve.alias ) {
delete config.resolve.alias['react'];
delete config.resolve.alias['react-dom']
}
for (let index = 0; index < config.plugins.length; index += 1) {
if (config.plugins[index].constructor.name === "UglifyJsPlugin") {
config.plugins.splice(index, 1, new UglifyJSPlugin({
sourceMap: true,
parallel: true,
}));
break;
}
}
return config
}
};
Entonces, ¿qué estoy haciendo mal?
psycura
en 12 dic. 2017
He agregado un ejemplo bastante avanzado con SCSS, url () en la hoja de estilo, img [src]. Debería funcionar de la caja con now.sh y tiene la recarga en caliente y la exportación configurada correctamente:
https://github.com/sheerun/extracted-loader/tree/master/examples/with-next
@psycura Veo que usas Windows, por lo que es posible que no funcione para ti de inmediato, pero envía arreglar PR
sheerun
en 12 dic. 2017
👎 Es una pena para Nextjs que no permita trabajar con archivos CSS externos. Hay un montón de paquetes listos para usar con sus propias hojas de estilo que me gustaría usar en mi proyecto. ¡Pero no puedo! Probé varias opciones, pero ninguna realmente funciona: ya pasé un día para esto.
mkozhukharenko
en 20 dic. 2017
@mkozhukharenko Funciona con archivos css y scss. Agregaré un ejemplo con https://github.com/coox/styled-jsx-css-loader . Carga CSS externo como jsx con estilo global o con alcance. Para scss global general, sugiero usar node-sass y postcss.
arefaslani
en 20 dic. 2017
@arefaslani Probé todas las opciones, ninguna funcionó para mí. Estoy totalmente decepcionado con este marco. ¿Cómo diablos una tarea tan fácil podría ser difícil? No volveré a utilizar un marco de referencia tan obstinado.
mkozhukharenko
en 20 dic. 2017
@mkozhukharenko Mira este ejemplo: https://github.com/arefaslani/next.js/tree/canary/examples/with-external-scoped-scss. Estoy creando una solicitud de extracción para agregarla a los ejemplos del repositorio principal.
arefaslani
en 20 dic. 2017
solo intente agregar mucho más CSS a su archivo y verá que styled-jsx no puede manejar eso. Recibo los errores 'jsx-undefind' no se puede coundir o 'jsx-4231512' no se pueden encontrar
mkozhukharenko
en 20 dic. 2017
@arefaslani ¿Hay alguna forma de usar este patrón con tu ejemplo?
import classes from './styles.scss'
const MyComponent = () => (
<header className={classes.header}>Hello</header>
)
protoEvangelion
en 26 dic. 2017
@protoEvangelion Desafortunadamente, actualmente solo funciona con styled-jsx.
arefaslani
en 26 dic. 2017
Aww ok gracias por la rápida respuesta :)
protoEvangelion
en 26 dic. 2017
Es una pena que la compilación de next.js no piense en reutilizar los recursos existentes al principio. Qué pérdida de tiempo configurando reglas complejas solo para un archivo css.
slavikshen
en 28 dic. 2017
Estoy trabajando en una solución para este problema que permita que funcionen todos los cargadores de paquetes web.
timneutkens
en 28 dic. 2017
También me gustaría señalar que personalmente no me gusta el tono de la gente en este número.
Entiendo totalmente que desea importar css. Y somos muy conscientes de esta solicitud. Por eso pasé la semana pasada trabajando en la mejor solución posible 👍
Más sobre esto pronto. Hasta entonces, sean amables y felices fiestas 🎅😄
timneutkens
en 28 dic. 2017
Hola a todos, encontré una solución en otro github,
Use skeleton-loader para seguir las reglas de BEM para lograr el mismo efecto que los módulos css,
Porque necesitará generar .scss.json, y luego usar la papelera para eliminar el .scss.json generado. Aunque no se siente ideal, quiero enviarle para ver si hay otros métodos mejores.
Hi, everybody, I found a solution on another github,
Use skeleton-loader to comply with BEM rules to achieve the same effect as css-modules,
Because it will need to generate. Scss.json, then use the trash will be generated. Scss.json delete
Although it feels less than ideal, give it to you to see if there are any other better ways
imagine10255
en 6 ene. 2018
@timneutkens ¿Cómo te va con tu solución?
Bobeta
en 8 ene. 2018
He creado una plantilla de Next que admite la importación de scss, css y muchas más funciones. Échale un vistazo y si te ha gustado dale una estrella;)
https://arefaslani.github.io/next-boilerplate
arefaslani
en 8 ene. 2018
@Bobeta Lo tengo funcionando, hay algunos casos
timneutkens
en 8 ene. 2018
@timneutkens ¡Es genial escucharlo! ¿Cuándo espera que se publique?
Bobeta
en 16 ene. 2018
@Bobeta Estoy seguro de que publicará en este hilo cuando esté publicado y esté listo para que lo usemos.
jthegedus
en 16 ene. 2018
@jthegedus Estoy seguro de que también lo hará, pero me pregunto acerca de las estimaciones para que la gente pueda basar sus decisiones en eso @timneutkens
Bobeta
en 16 ene. 2018
Temas relacionados
timneutkens
·
3Comentarios
kenji4569
·
3Comentarios
olifante
·
3Comentarios
knipferrc
·
3Comentarios
flybayer
·
3Comentarios
Comentario más útil
También me gustaría señalar que personalmente no me gusta el tono de la gente en este número.
Entiendo totalmente que desea importar css. Y somos muy conscientes de esta solicitud. Por eso pasé la semana pasada trabajando en la mejor solución posible 👍
Más sobre esto pronto. Hasta entonces, sean amables y felices fiestas 🎅😄