C'est un problème redondant que je connais, mais j'ai ouvert ce problème intentionnellement. Cela fait trois jours que je configure un passe-partout next.js (avec redux, redux-saga, ...) et cela fait deux jours que je suis coincé dans la configuration du chargement de fichiers css et scss externes. J'ai vérifié les exemples with-global-stylesheet et with-scoped-stylesheet-and-postcss , mais chacun d'eux présente des problèmes majeurs mentionnés dans les numéros précédents. J'ai vu trop de problèmes ouverts et fermés qui résolvent ce problème avec des hacks... Je pense que c'est une bonne idée qu'au lieu de laisser le problème pour trouver la meilleure solution, résolvez-le avec les solutions disponibles actuellement jusqu'à en trouver une meilleure. Parce que beaucoup ont ce problème maintenant et veulent le voir résolu maintenant !
Je suis d'accord, seul styled-jsx a un support propre (y compris le rechargement à chaud) et c'est ce qui m'empêche d'utiliser Next.js pour autre chose que lorsque j'ai besoin d'un prototypage rapide.
Je pense que la solution aux problèmes de portée des modules CSS par CSS est beaucoup plus propre, et avec les modules CSS, il est toujours possible de passer des classes aux composants enfants (essayez de mettre une classe non globale sur un SVG importé avec babel-plugin-inline-react-svg
avec styled-jsx).
Cela et je préfère avoir des fichiers standardisés .css
pour éviter autant que possible le verrouillage du framework et des fichiers CSS externes en production pour la mise en cache (et pour que les polyfills MQ comme Respond.js fonctionnent si vous avez la malchance de doivent encore prendre en charge IE8).
Massif +1
C'est une énorme frustration qu'une chose aussi simple qu'un css/scss externe soit presque impossible à réaliser avec next.js, ce qui le rend inutile pour 90% de mes applications.
Je travaille avec bootstrap, et j'ai besoin d'une configuration où il y aura une importation globale de css bootstrap, avec l'ajout de css à portée externe.
Bien que nous ayons réussi à faire fonctionner un stylet externe avec le style jsx 1 (webpack pour gérer la compilation), nous avons eu du mal à le comprendre sur le style jsx 2 depuis l'introduction du changement de gestion des fichiers css séparés.
Approche actuelle :
import ComponentStyles from './footer.styl';
...
<style jsx>
{ComponentStyles}
</style>
Ce serait formidable de voir https://github.com/zeit/next.js/tree/master/examples/with-styled-jsx-scss travailler avec des fichiers scss externes.
Nous avons vécu la même épreuve lors de la mise en place de l'environnement.
Finalement, nous nous sommes installés avec une feuille de style globale avec scss+post css avec lost-grid.
Le rechargement à chaud fonctionne, donc même si ce n'est pas une solution idéale (en raison du chargement de la feuille de style globale en même temps), c'est un bon compromis.
Dépendances
"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>
...
Et vous pouvez ensuite gérer vos styles à partir de /styles/main.scss
J'espère que ça aide
Mon problème avec chacun de ces deux exemples de style ( with-global-stylesheet et with-scoped-stylesheets-and-postcss ) est qu'aucun d'entre eux n'est simple à intégrer aux tests Jest et Snapshot avec le CSS dans l'instantané. Il y a eu des gens qui ont réussi à faire fonctionner Jest avec Webpack, mais c'est en sautant spécifiquement le CSS.
L'exécution d'un fichier de préprocesseur babel-jest
comme décrit dans cette réponse SO semble être un si mauvais hack.
Il semble que le CSS externe soit utilisé comme feuille de style with-global, vous devez utiliser Webpack, mais pour utiliser Jest, vous ne pouvez pas compter sur Webpack, uniquement sur Babel.
Quelqu'un a-t-il des idées dans cet espace?
Je suis confronté à un problème similaire. Je suis nouveau sur nextjs et je ne parviens pas à faire fonctionner correctement l'exemple "with-external-scoped-css". Parfois, mon css est chargé et parfois non. Je ne sais pas si c'est le même problème dont vous parlez.
Problèmes de styles externes résolus avec ce chargeur https://github.com/coox/styled-jsx-css-loader
@ilionic J'ai vérifié votre solution. C'est bien! Merci :)
@arefaslani Je ne pense pas que ce problème soit clos.
Depuis HTTP v1, c'est toujours une horrible taxe sur les performances pour des tonnes de CSS à charger, cela augmente considérablement le temps de premier dessin.
Une prise en charge correcte des styles externes permettrait d'importer du CSS et cela se traduirait par un pas une ligne ...
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 Je sais ce que vous voulez dire à propos de bootstrap, ce n'est pas une solution miracle. Nous extrayons des parties essentielles du framework d'amorçage pour séparer le fichier css afin que les navigateurs puissent le mettre en cache. Pas idéal, mais cette maladresse de traiter avec des préprocesseurs et des frameworks CSS poussant vers de nouvelles approches css-in-js et coupant les dépendances sur les frameworks CSS.
@ilionic Je comprends ce que vous dites, mais quand même - avoir des tonnes de CSS en ligne est mauvais pour les performances (en particulier le temps de la première image). J'ai eu pas mal de projets pour lesquels nous avons fortement optimisé pour cela.
C'est dommage de perdre tout ça, surtout compte tenu du fait que nous pouvons avoir un DOM rendu par le serveur.
Peut-être fermer ce problème, mais en ouvrir un nouveau, spécifiquement pour une solution qui nous permet de lier un CSS externe ?
Il serait étrange d'ignorer une pratique de développement clairement répandue.
@israelidanny est d' accord, nous avons toujours du mal avec les performances CSS et sans réécritures majeures, nous ne savons pas comment le résoudre, donc ce problème est en effet plus profond. Styled-jsx est probablement un dépôt plus pertinent dans ce cas ?
@ilionic hmm, je ne vois pas en quoi le référentiel styled-jsx serait le bon endroit.
Le problème ne vient pas d'eux, le problème est d'activer la prise en charge de next.js des fichiers css externes, qui peuvent ou non impliquer quelque chose à voir avec styled-jsx.
Qu'est-ce que tu penses?
@israelidanny Ce n'était pas la meilleure solution, mais ça marche quand même. Mais tu as raison. Avoir tous les CSS en ligne dans chaque page sans mise en cache n'est pas la meilleure solution. Je suis aussi d'accord avec toi sur cette partie :
Le problème ne vient pas d'eux, le problème est d'activer la prise en charge de next.js des fichiers css externes, qui peuvent ou non impliquer quelque chose à voir avec styled-jsx.
et absolument pas d'accord avec @ilionic dans :
Styled-jsx est probablement plus pertinent dans ce cas
J'ai réussi une solution avec styled-jsx/css loader . Vous pouvez voir le code sur https://github.com/P233/nextjs-with-scss
Cependant, j'ai remarqué que les fichiers @import
ed scss ne sont pas surveillés et ne déclenchent pas de rechargement à chaud, ce qui me frustre vraiment.
J'ai créé https://github.com/sheerun/extracted-loader pour recharger à chaud les fichiers de feuille de style extraits. Cela fonctionne assez bien même pour le développement, donc dangerouslySetInnerHTML
n'est pas nécessaire.
Vous l'utilisez ainsi :
config.module.rules.push({
test: /\.css$/,
use: ['extracted-loader'].concat(ExtractTextPlugin.extract({
/* Your configuration here */
}))
})
config.plugins.push(new ExtractTextPlugin('index.css'))
@sheerun , merci, mais comment j'injecte mon css dans les composants ?
Vous n'injectez pas, vous extrayez tout avec ExtractTextPlugin et écrivez ce qui suit :
<Head>
<link rel='stylesheet' type='text/css' href="/static/index.css" />
</Head>
dans vos composants quelque chose comme
import './styles.scss'
devrait suffire
ok, mais maintenant j'ai une erreur:
./components/Accueil/Accueil.js
Module introuvable : erreur : impossible de résoudre 'css-loader' dans 'D:\Sites\work\VisualProposal'
@ ./components/Home/Home.js 13:0-22
@ ./pages?entrée
@ multi ./pages?entry
mon composant 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 );
mon 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
}
};
Alors qu'est-ce que je fais mal?
J'ai ajouté un exemple assez avancé avec SCSS, url() dans la feuille de style, img[src]. Cela devrait fonctionner avec now.sh et le rechargement à chaud et l'exportation sont correctement configurés :
https://github.com/sheerun/extracted-loader/tree/master/examples/with-next
@psycura Je vois que vous utilisez Windows, donc cela pourrait ne pas fonctionner pour vous tout de suite, mais veuillez envoyer le correctif PR
Dommage pour Nextjs qu'il ne permette pas de travailler avec des fichiers css externes. Il y a des tonnes de packages prêts à l'emploi avec leurs propres feuilles de style que j'aimerais utiliser dans mon projet. Mais je ne peux pas ! J'ai essayé plusieurs options mais aucune ne fonctionne vraiment : j'ai déjà passé une journée pour ça.
@mkozhukharenko Cela fonctionne avec les fichiers css et scss. Je vais ajouter un exemple avec https://github.com/coox/styled-jsx-css-loader . Il charge le CSS externe en tant que scoped ou global styled-jsx. Pour le scss global général, je suggère d'utiliser node-sass et postcss.
@arefaslani J'ai essayé toutes les options, aucune n'a fonctionné pour moi. Je suis totalement déçu par ce cadre. Comment diable une tâche si facile pourrait-elle être difficile ? Je n'utiliserai plus un tel cadre de cadre opiniâtre.
@mkozhukharenko Regardez cet exemple : https://github.com/arefaslani/next.js/tree/canary/examples/with-external-scoped-scss. Je crée une pull request pour l'ajouter aux principaux exemples de référentiel.
essayez simplement d'ajouter beaucoup plus de css à votre fichier et vous verrez que styled-jsx
ne peut pas gérer cela. Je reçois 'jsx-undefind' ne peut pas être trouvé ou 'jsx-4231512' ne peut pas être trouvé des erreurs
@arefaslani Existe-t-il un moyen d'utiliser ce modèle avec votre exemple ?
import classes from './styles.scss'
const MyComponent = () => (
<header className={classes.header}>Hello</header>
)
@protoEvangelion Malheureusement, actuellement, cela ne fonctionne qu'avec styled-jsx.
Aww ok merci pour la réponse rapide :)
C'est dommage que la construction de next.js ne pense pas à la réutilisation des ressources existantes au début. Quelle perte de temps à mettre en place des règles complexes juste pour un fichier css.
Je travaille sur une solution à ce problème qui permet à tous les chargeurs de packs Web de fonctionner.
J'aimerais également souligner que personnellement, je n'aime pas le ton que les gens ont dans cette question.
Je comprends tout à fait que vous vouliez importer du CSS. Et nous sommes très conscients de cette demande. C'est pourquoi j'ai passé la semaine dernière à travailler sur la meilleure solution possible 👍
Plus à ce sujet bientôt. D'ici là, soyez gentils et joyeuses fêtes 🎅😄
Salut à tous, j'ai trouvé une solution sur un autre github,
Utilisez squelette-loader pour suivre les règles BEM pour obtenir le même effet que les modules css,
Parce que vous devrez générer .scss.json, puis utiliser la corbeille pour supprimer le .scss.json généré. Bien que cela ne semble pas idéal, je veux vous envoyer voir s'il existe d'autres meilleures méthodes.
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
@timneutkens Comment ça se passe avec ta solution ?
J'ai créé un passe-partout Next qui prend en charge l'importation de scss, css et de nombreuses autres fonctionnalités. Jetez-y un œil et si vous l'avez aimé, donnez-lui une étoile ;)
https://arefaslani.github.io/next-boilerplate
@Bobeta Je l'ai fait fonctionner, il y a quelques cas limites que je veux résoudre avant de soumettre un PR.
@timneutkens Super à entendre ! Quand pensez-vous qu'il sera publié ?
@Bobeta Je suis sûr qu'il
@jthegedus Je suis sûr qu'il le fera aussi, mais je m'interroge sur les estimations afin que les gens puissent fonder leurs décisions sur ce @timneutkens
Commentaire le plus utile
J'aimerais également souligner que personnellement, je n'aime pas le ton que les gens ont dans cette question.
Je comprends tout à fait que vous vouliez importer du CSS. Et nous sommes très conscients de cette demande. C'est pourquoi j'ai passé la semaine dernière à travailler sur la meilleure solution possible 👍
Plus à ce sujet bientôt. D'ici là, soyez gentils et joyeuses fêtes 🎅😄