Next.js: Arbeiten mit externen CSS- und CSS-Dateien
Es ist ein überflüssiges Problem, das ich kenne, aber ich habe dieses Problem absichtlich geöffnet. Es sind drei Tage, in denen ich eine next.js-Boilerplate (mit Redux, Redux-Saga, ...) einrichte und zwei Tage lang bin ich beim Einrichten des Ladens externer CSS- und Scss-Dateien stecken geblieben. Ich habe die Beispiele with-global- stylesheet und
arefaslani
Alle 38 Kommentare
Ich stimme zu, nur styled-jsx hat saubere (einschließlich Hot-Reloading) Unterstützung und das hält mich davon ab, Next.js für alles zu verwenden, außer wenn ich schnelles Prototyping benötige.
Ich denke, die Lösung für CSS-Scoping-Probleme von CSS-Modulen ist viel sauberer, und mit CSS-Modulen ist es immer noch möglich, Klassen an untergeordnete Komponenten zu übergeben (versuchen Sie, eine nicht-globale Klasse auf ein SVG zu setzen, das mit babel-plugin-inline-react-svg importiert wurde). mit styled-jsx).
Das und ich bevorzuge standardisierte .css Dateien, um Framework-Lock-in so weit wie möglich zu verhindern, und externe CSS-Dateien in der Produktion zum Caching (und damit MQ-Polyfills wie Respond.js funktionieren, wenn Sie das Pech haben müssen noch IE8) unterstützen.
CrocoDillon
am 22. Okt. 2017
Massiv +1
Es ist eine große Frustration, dass eine so einfache Sache wie externes CSS/Scss mit next.js fast unmöglich zu erreichen ist, was es für 90% meiner Anwendungen nutzlos macht.
Ich arbeite mit Bootstrap und benötige eine Konfiguration, bei der es einen globalen Bootstrap-CSS-Import mit zusätzlichem CSS mit externem Geltungsbereich gibt.
israelidanny
am 25. Okt. 2017
Während wir es geschafft haben, einen externen Stylus mit styled jsx 1 (Webpack zur Handhabung der Kompilierung) zum Laufen zu bringen, hatten wir Schwierigkeiten, dies auf styled jsx 2 herauszufinden, seit die Änderung der Handhabung separater CSS-Dateien eingeführt wurde.
Aktueller Ansatz:
import ComponentStyles from './footer.styl';
...
<style jsx>
{ComponentStyles}
</style>
Wäre toll zu sehen, wie https://github.com/zeit/next.js/tree/master/examples/with-styled-jsx-scss mit externen scss-Dateien arbeitet.
ilionic
am 30. Okt. 2017
Wir haben die gleiche Tortur beim Einrichten der Umgebung durchgemacht.
Schließlich haben wir uns mit einem globalen Stylesheet mit scss+post css mit Lost-Grid zufrieden gegeben.
Hot Reloading funktioniert, ist also zwar keine ideale Lösung (da das globale Stylesheet auf einmal geladen wird), aber ein guter Kompromiss.
Abhängigkeiten
"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"
In package.json
...
"postcss": {
"plugins": {
"lost": {},
"postcss-easy-import": {
"prefix": "_"
},
"autoprefixer": {},
"pixrem": {}
}
}
...
In 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
}
In pages/_document.js
...
import stylesheet from 'styles/main.scss'
...
<Head>
<style dangerouslySetInnerHTML={{ __html: stylesheet }} />
</Head>
...
Und Sie können Ihre Stile dann von /styles/main.scss . aus verwalten
Ich hoffe es hilft
steeeeee
am 14. Nov. 2017
Mein Problem bei jedem dieser beiden Stilbeispiele ( with-global- stylesheet und Jest- und Snapshot-Tests zu integrieren ist. Es hat Leute gegeben, die Jest erfolgreich dazu gebracht haben, mit Webpack zu arbeiten, aber das ist, indem sie ausdrücklich das CSS überspringen.
Das Ausführen einer babel-jest Präprozessordatei, wie in dieser SO-Antwort beschrieben, scheint ein so schlechter Hack zu sein.
Es scheint externes CSS als with-global- stylesheet zu erhalten, Sie müssen Webpack verwenden, aber um Jest zu verwenden, können Sie sich nicht auf Webpack verlassen, sondern nur auf Babel.
Hat jemand Ideen in diesem Bereich?
jthegedus
am 14. Nov. 2017
ich stehe vor einem ähnlichen Problem. Ich bin neu bei nextjs und kann das Beispiel "with-external-scoped-css" nicht richtig zum Laufen bringen. Manchmal wird meine CSS geladen und manchmal nicht. Ich weiß nicht, ob es das gleiche Problem ist, von dem du redest.
anacicconi
am 14. Nov. 2017
Probleme mit externen Stilen mit diesem Loader behoben https://github.com/coox/styled-jsx-css-loader
ilionic
am 17. Nov. 2017
@ilionic Ich habe deine Lösung überprüft. Es ist großartig! Dankeschön :)
arefaslani
am 18. Nov. 2017
@arefaslani Ich glaube nicht, dass dieses Problem geschlossen ist.
Ab HTTP v1 ist es immer noch eine schreckliche Leistungssteuer für das Laden von Tonnen von CSS, es verlängert die Zeit bis zum ersten Zeichnen dramatisch.
Die richtige Unterstützung für externe Stile würde das Importieren von CSS ermöglichen und zu a . führen kein Inline ...
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
am 19. Nov. 2017
@israelidanny Ich weiß, was Sie mit Bootstrap meinen, es ist keine
ilionic
am 19. Nov. 2017
@ilionic Ich verstehe, was Sie sagen, aber trotzdem - Tonnen von Inline-CSS sind schlecht für die Leistung (insbesondere die Zeit bis zum ersten Frame). Ich hatte einige Projekte, bei denen wir stark dafür optimiert haben.
Es ist eine Schande, all das zu verlieren, vor allem angesichts der Tatsache, dass wir Server-gerendertes DOM haben können.
Vielleicht schließen Sie dieses Problem, aber öffnen Sie ein neues, speziell für eine Lösung, mit der wir externes CSS verlinken können?
Es wäre seltsam, eine eindeutig vorherrschende Entwicklungspraxis zu ignorieren.
israelidanny
am 19. Nov. 2017
@israelidanny stimme zu, wir kämpfen immer noch mit der CSS-Leistung und ohne größere Überarbeitungen ist nicht klar, wie wir es lösen können, also geht dieses Problem tatsächlich tiefer. Wahrscheinlich ist styled-jsx in diesem Fall relevanteres Repo?
ilionic
am 19. Nov. 2017
@ilionic hmm, ich sehe nicht, wie styled-jsx repo der richtige Ort wäre.
Das Problem liegt nicht bei ihnen, das Problem besteht darin, dass die next.js-Unterstützung externer CSS-Dateien aktiviert wird, die möglicherweise mit styled-jsx zu tun haben oder auch nicht.
Was denken Sie?
israelidanny
am 19. Nov. 2017
@israelidanny Es war nicht die beste Lösung, aber es funktioniert trotzdem. Aber du hast recht. Das gesamte CSS auf jeder Seite ohne Caching inline zu haben, ist nicht die beste Lösung. Auch in diesem Teil stimme ich dir zu:
Das Problem liegt nicht bei ihnen, das Problem besteht darin, dass die next.js-Unterstützung externer CSS-Dateien aktiviert wird, die möglicherweise mit styled-jsx zu tun haben oder auch nicht.
und stimme @ilionic absolut nicht zu:
Wahrscheinlich ist styled-jsx in diesem Fall relevanteres Repo
arefaslani
am 19. Nov. 2017
Ich habe eine Lösung mit styled-jsx/css loader verwaltet . Sie können den Code von https://github.com/P233/nextjs-with-scss sehen
Ich habe jedoch bemerkt, dass die @import ed scss-Dateien nicht überwacht werden und kein Hot-Reload auslösen, was mich wirklich frustriert.
P233
am 8. Dez. 2017
Ich habe https://github.com/sheerun/extracted-loader erstellt, um extrahierte Stylesheet-Dateien erneut zu laden. Es funktioniert sogar für die Entwicklung ziemlich gut, also ist dangerouslySetInnerHTML nicht notwendig.
Sie verwenden es so:
config.module.rules.push({
test: /\.css$/,
use: ['extracted-loader'].concat(ExtractTextPlugin.extract({
/* Your configuration here */
}))
})
config.plugins.push(new ExtractTextPlugin('index.css'))
sheerun
am 9. Dez. 2017
@sheerun , danke, aber wie
psycura
am 11. Dez. 2017
Sie injizieren nicht, Sie extrahieren alles mit ExtractTextPlugin und schreiben Folgendes:
<Head>
<link rel='stylesheet' type='text/css' href="/static/index.css" />
</Head>
in deinen komponenten sowas wie
import './styles.scss'
sollte genug sein
sheerun
am 11. Dez. 2017
Okay, aber jetzt habe ich einen Fehler:
./components/Home/Home.js
Modul nicht gefunden: Fehler: 'css-loader' in 'D:\Sites\work\VisualProposal' kann nicht aufgelöst werden
@ ./components/Home/Home.js 13:0-22
@ ./pages?Eintrag
@ multi ./pages?Eintrag
meine Home.js-Komponente:
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 );
meine 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
}
};
Also was mache ich falsch?
psycura
am 12. Dez. 2017
Ich habe ein ziemlich fortgeschrittenes Beispiel mit SCSS, url() im Stylesheet, img[src] hinzugefügt. Es sollte von der Box aus mit now.sh funktionieren und hat Hot-Reload und Export richtig konfiguriert:
https://github.com/sheerun/extracted-loader/tree/master/examples/with-next
@psycura Ich sehe, dass Sie Windows verwenden, daher funktioniert es möglicherweise nicht sofort, aber bitte senden Sie einen Fix-PR
sheerun
am 12. Dez. 2017
👎 Schade für Nextjs, dass es nicht erlaubt, mit externen CSS-Dateien zu arbeiten. Es gibt jede Menge fertige Pakete mit eigenen Stylesheets, die ich in meinem Projekt verwenden möchte. Aber ich kann nicht! Ich habe mehrere Optionen ausprobiert, aber keiner funktioniert wirklich: Habe bereits einen Tag dafür verbracht.
mkozhukharenko
am 20. Dez. 2017
@mkozhukharenko Es funktioniert mit CSS- und Scss-Dateien. Ich werde ein Beispiel mit https://github.com/coox/styled-jsx-css-loader hinzufügen. Es lädt externes CSS als Scoped oder Global styled-jsx. Für allgemeines globales scss empfehle ich die Verwendung von node-sass und postcss.
arefaslani
am 20. Dez. 2017
@arefaslani Ich habe alle Optionen ausprobiert, keine hat bei mir funktioniert. Ich bin total enttäuscht von diesem Rahmen. Wie um alles in der Welt konnte eine so leichte Aufgabe schwierig sein? Ich werde solch ein meinungsbildendes Framework-Framework nicht wieder verwenden.
mkozhukharenko
am 20. Dez. 2017
@mkozhukharenko Schau dir dieses Beispiel an: https://github.com/arefaslani/next.js/tree/canary/examples/with-external-scoped-scss. Ich erstelle eine Pull-Anfrage, um sie zu den Haupt-Repository-Beispielen hinzuzufügen.
arefaslani
am 20. Dez. 2017
Versuchen Sie einfach, Ihrer Datei viel mehr CSS hinzuzufügen, und Sie werden feststellen, dass styled-jsx damit nicht umgehen kann. Ich erhalte 'jsx-undefind' kann nicht gefunden werden oder 'jsx-4231512' kann nicht gefunden werden
mkozhukharenko
am 20. Dez. 2017
@arefaslani Gibt es eine Möglichkeit, dieses Muster in Ihrem Beispiel zu verwenden?
import classes from './styles.scss'
const MyComponent = () => (
<header className={classes.header}>Hello</header>
)
protoEvangelion
am 26. Dez. 2017
@protoEvangelion Leider funktioniert es derzeit nur mit styled-jsx.
arefaslani
am 26. Dez. 2017
Aww ok danke für die schnelle Antwort :)
protoEvangelion
am 26. Dez. 2017
Schade, dass beim Build von next.js zunächst nicht an die Wiederverwendung vorhandener Ressourcen gedacht wird. Was für eine Zeitverschwendung, komplexe Regeln nur für eine CSS-Datei einzurichten.
slavikshen
am 28. Dez. 2017
Ich arbeite an einer Lösung für dieses Problem, mit der alle Webpack-Loader funktionieren können.
timneutkens
am 28. Dez. 2017
Ich möchte auch darauf hinweisen, dass mir persönlich der Ton der Leute in dieser Ausgabe nicht gefällt.
Ich verstehe völlig, dass Sie CSS importieren möchten. Und wir sind uns dieser Bitte sehr bewusst. Deshalb habe ich die vergangene Woche damit verbracht, an der bestmöglichen Lösung zu arbeiten 👍
Mehr dazu in Kürze. Bis dahin bitte schöne Feiertage
timneutkens
am 28. Dez. 2017
Hallo zusammen, ich habe eine Lösung auf einem anderen Github gefunden,
Verwenden Sie den Skeleton-Loader, um BEM-Regeln zu befolgen, um den gleichen Effekt wie bei CSS-Modulen zu erzielen.
Da Sie .scss.json generieren und dann den Papierkorb verwenden müssen, um die generierte .scss.json zu löschen. Obwohl es sich nicht ideal anfühlt, möchte ich Sie senden, um zu sehen, ob es andere bessere Methoden gibt.
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
am 6. Jan. 2018
@timneutkens Wie
Bobeta
am 8. Jan. 2018
Ich habe eine Next-Boilerplate erstellt, die das Importieren von CSS, CSS und vielen weiteren Funktionen unterstützt. Schaut es euch an und wenn es euch gefallen hat, gibt es einen Stern ;)
https://arefaslani.github.io/next-boilerplate
arefaslani
am 8. Jan. 2018
@Bobeta Ich habe es zum Randfälle, die ich beheben möchte, bevor ich eine PR einreiche.
timneutkens
am 8. Jan. 2018
@timneutkens Schön zu hören! Wann erwarten Sie die Veröffentlichung?
Bobeta
am 16. Jan. 2018
@Bobeta Ich bin mir sicher, dass er in diesem Thread posten wird, wenn er veröffentlicht und für uns bereit ist.
jthegedus
am 16. Jan. 2018
@jthegedus Ich bin mir sicher, dass er das auch @timneutkens
Bobeta
am 16. Jan. 2018
Verwandte Themen
sospedra
·
3Kommentare
timneutkens
·
3Kommentare
YarivGilad
·
3Kommentare
YarivGilad
·
3Kommentare
havefive
·
3Kommentare
Hilfreichster Kommentar
Ich möchte auch darauf hinweisen, dass mir persönlich der Ton der Leute in dieser Ausgabe nicht gefällt.
Ich verstehe völlig, dass Sie CSS importieren möchten. Und wir sind uns dieser Bitte sehr bewusst. Deshalb habe ich die vergangene Woche damit verbracht, an der bestmöglichen Lösung zu arbeiten 👍
Mehr dazu in Kürze. Bis dahin bitte schöne Feiertage