Next.js: العمل مع ملفات css و scss الخارجية
إنها قضية زائدة عن الحاجة أعرفها ، لكنني فتحت هذا العدد عن قصد. إنها ثلاثة أيام أقوم فيها بإعداد Boilerplate next.js (مع redux ، redux-saga ، ...) وأنا عالق في إعداد تحميل ملفات css و scss الخارجية لمدة يومين. لقد راجعت باستخدام ورقة الأنماط العامة وأمثلة ورقة الأنماط ذات النطاق و postcss ، ولكن كل واحد منهم لديه مشاكل كبيرة مذكورة في الإصدارات السابقة. لقد رأيت الكثير من المشكلات المفتوحة والمغلقة التي تعمل على حل هذه المشكلة باستخدام الاختراقات ... أعتقد أنها فكرة جيدة أنه بدلاً من ترك المشكلة للعثور على أفضل حل ، قم بحلها بالحلول المتاحة حاليًا حتى تجد حلًا أفضل. لأن الكثيرين لديهم هذه المشكلة الآن ويريدون رؤيتها تم حلها الآن!
arefaslani
ال 38 كومينتر
أوافق ، فقط style-jsx لديه دعم نظيف (بما في ذلك إعادة التحميل الساخن) وهذا ما يمنعني من استخدام Next.js لأي شيء ولكن عندما أحتاج إلى بعض النماذج الأولية السريعة.
أعتقد أن حل مشكلات CSS الخاصة بنطاق وحدات CSS هو حل أكثر وضوحًا ، بالإضافة إلى أنه مع وحدات CSS لا يزال من الممكن تمرير الفئات إلى المكونات الفرعية (حاول وضع فئة غير عالمية على SVG مستورد babel-plugin-inline-react-svg مع التصميم- jsx).
هذا وأنا أفضل أن يكون لدينا ملفات .css موحدة لمنع قفل الإطار قدر الإمكان وملفات CSS خارجية في الإنتاج للتخزين المؤقت (ولجعل MQ polyfills مثل Respond.js تعمل إذا كنت محظوظًا بما فيه الكفاية ل لا يزال يتعين عليك دعم IE8).
CrocoDillon
في ٢٢ أكتوبر ٢٠١٧
+1 ضخمة
إنه لإحباط كبير أن مثل هذا الشيء البسيط مثل css / scss الخارجي يكاد يكون من المستحيل تحقيقه مع next.js ، مما يجعله عديم الفائدة لـ 90٪ من تطبيقاتي.
أنا أعمل مع bootstrap ، وأحتاج إلى تكوين حيث سيكون هناك استيراد عالمي واحد لـ bootstrap css ، مع إضافة css الخارجية ذات النطاق.
israelidanny
في ٢٥ أكتوبر ٢٠١٧
بينما تمكنا من الحصول على قلم خارجي يعمل باستخدام jsx 1 المصمم (webpack للتعامل مع التجميع) ، واجهنا صعوبة في اكتشافه على jsx 2 المصمم منذ كسر التغيير في التعامل مع ملفات css المنفصلة المقدمة.
النهج الحالي:
import ComponentStyles from './footer.styl';
...
<style jsx>
{ComponentStyles}
</style>
سيكون من الرائع رؤية https://github.com/zeit/next.js/tree/master/examples/with-styled-jsx-scss يعمل مع ملفات scss الخارجية.
ilionic
في ٣٠ أكتوبر ٢٠١٧
لقد مررنا بنفس المحنة عند إعداد البيئة.
في النهاية استقرنا على ورقة أنماط عامة باستخدام scss + post css مع الشبكة المفقودة.
يعمل إعادة التحميل السريع ، لذلك على الرغم من أنه ليس حلاً مثاليًا (نظرًا لتحميل ورقة الأنماط العامة دفعة واحدة) ، إلا أنه حل وسط جيد.
التبعيات
"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"
في package.json
...
"postcss": {
"plugins": {
"lost": {},
"postcss-easy-import": {
"prefix": "_"
},
"autoprefixer": {},
"pixrem": {}
}
}
...
في 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
}
في pages/_document.js
...
import stylesheet from 'styles/main.scss'
...
<Head>
<style dangerouslySetInnerHTML={{ __html: stylesheet }} />
</Head>
...
ويمكنك بعد ذلك إدارة أنماطك بدءًا من /styles/main.scss
آمل أن يساعد
steeeeee
في ١٤ نوفمبر ٢٠١٧
مشكلتي مع كل من هذين النموذجين ( مع ورقة الأنماط العامة وأوراق الأنماط ذات النطاق و postcss ) هي أنه لا يوجد أي منهما
يبدو أن تشغيل ملف المعالج المسبق babel-jest كما هو موضح في إجابة SO هذه يعد اختراقًا سيئًا.
يبدو أنه للحصول على CSS خارجي كما هو الحال مع ورقة الأنماط العامة ، يجب عليك استخدام Webpack ، ولكن لاستخدام Jest لا يمكنك الاعتماد على Webpack ، فقط Babel.
هل لدى أي شخص أفكار في هذا الفضاء؟
jthegedus
في ١٤ نوفمبر ٢٠١٧
أواجه مشكلة مماثلة. أنا جديد على nextjs ولا يمكنني جعل المثال "with-external-scoped-css" يعمل بشكل صحيح. في بعض الأحيان ، يتم تحميل ملف Css الخاص بي وأحيانًا لا يتم تحميله. لا أعرف ما إذا كانت نفس المشكلة التي تتحدث عنها.
anacicconi
في ١٤ نوفمبر ٢٠١٧
تم حل مشكلات الأنماط الخارجية مع هذا المحمل https://github.com/coox/styled-jsx-css-loader
ilionic
في ١٧ نوفمبر ٢٠١٧
ilionic لقد راجعت الحل الخاص بك. انه لشيء رائع! شكرا لك :)
arefaslani
في ١٨ نوفمبر ٢٠١٧
arefaslani لا أعتقد أن هذه القضية مغلقة.
اعتبارًا من HTTP v1 ، لا تزال ضريبة أداء مروعة لتحميل أطنان من CSS ، فهي تزيد من وقت الرسم أولاً بشكل كبير.
سيسمح دعم النمط الخارجي المناسب باستيراد CSS وينتج عنه ملف ليس مضمنة ...
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
في ١٩ نوفمبر ٢٠١٧
israelidanny أنا أعرف ما
ilionic
في ١٩ نوفمبر ٢٠١٧
ilionic أفهم ما تقوله ، لكن لا يزال - وجود الكثير من CSS المضمنة سيئ للأداء (تحديدًا وقت الإطار الأول). كان لدي عدد غير قليل من المشاريع حيث قمنا بتحسين ذلك بشكل كبير.
إنه لأمر مخز أن نفقد كل ذلك ، خاصة بالنظر إلى حقيقة أنه يمكننا الحصول على DOM مقدم من الخادم.
ربما تغلق هذه المشكلة ، لكن تفتح واحدة جديدة ، خاصة لحل يتيح لنا ربط CSS الخارجية؟
سيكون من الغريب تجاهل ممارسة التنمية السائدة بوضوح.
israelidanny
في ١٩ نوفمبر ٢٠١٧
نتفق israelidanny ، ما زلنا نكافح مع أداء CSS وبدون إعادة كتابة كبيرة ، ليس من الواضح كيفية حلها ، لذا فإن هذه المشكلة تتعمق بالفعل. من المحتمل أن يكون style-jsx أكثر صلة الريبو في هذه الحالة؟
ilionic
في ١٩ نوفمبر ٢٠١٧
ilionic hmm ، أنا لا أرى كيف سيكون الطراز jsx repo هو المكان المناسب.
المشكلة ليست معهم ، المشكلة هي تمكين دعم next.js لملفات css الخارجية ، والتي قد تتضمن أو لا تتعلق بأي شيء يتعلق بـ style-jsx.
ماذا تعتقد؟
israelidanny
في ١٩ نوفمبر ٢٠١٧
israelidanny لم يكن هذا هو الحل الأفضل ، لكنه يعمل على أي حال. لكنك على حق. إن وجود كل ملفات css مضمنة في كل صفحة بدون تخزين مؤقت ليس الحل الأفضل. كما أنني أتفق معك في هذا الجزء:
المشكلة ليست معهم ، المشكلة هي تمكين دعم next.js لملفات css الخارجية ، والتي قد تتضمن أو لا تتعلق بأي شيء يتعلق بـ style-jsx.
وأختلف تمامًا مع
من المحتمل أن يكون style-jsx أكثر صلة بالموضوع في هذه الحالة
arefaslani
في ١٩ نوفمبر ٢٠١٧
لقد تمكنت من إيجاد حل باستخدام محمل على غرار jsx / css . يمكنك رؤية الكود من https://github.com/P233/nextjs-with-scss
ومع ذلك ، لاحظت أن ملفات scss @import ed لا تتم مشاهدتها ولن تؤدي إلى إعادة تحميل ساخنة ، مما يجعلني محبطًا حقًا.
P233
في ٨ ديسمبر ٢٠١٧
لقد قمت بإنشاء https://github.com/sheerun/extracted-loader لتحميل ملفات الأنماط المستخرجة من hotreload. إنه يعمل بشكل جيد حتى بالنسبة للتطوير ، لذا فإن dangerouslySetInnerHTML ليس ضروريًا.
تستخدمه على النحو التالي:
config.module.rules.push({
test: /\.css$/,
use: ['extracted-loader'].concat(ExtractTextPlugin.extract({
/* Your configuration here */
}))
})
config.plugins.push(new ExtractTextPlugin('index.css'))
sheerun
في ٩ ديسمبر ٢٠١٧
sheerun ، شكرًا لك ، لكن كيف أقوم بحقن css في المكونات؟
psycura
في ١١ ديسمبر ٢٠١٧
أنت لا تحقن ، فأنت تستخرج كل شيء باستخدام ExtractTextPlugin وتكتب ما يلي:
<Head>
<link rel='stylesheet' type='text/css' href="/static/index.css" />
</Head>
في مكوناتك شيء مثل
import './styles.scss'
يبنغي أن يكون كافيا
sheerun
في ١١ ديسمبر ٢٠١٧
حسنًا ، ولكن لدي الآن خطأ:
./components/Home/Home.js
الوحدة غير موجودة: خطأ: لا يمكن حل 'css-loader' في 'D: \ Sites \ work \ VisualProposal'
@ ./components/Home/Home.js 13: 0-22
@ ./pages؟entry
@ متعدد. / صفحات؟
مكوِّن 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 );
my 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
}
};
إذن ما الذي أفعله خطأ؟
psycura
في ١٢ ديسمبر ٢٠١٧
لقد أضفت مثالًا متقدمًا جدًا مع SCSS ، url () في ورقة الأنماط ، img [src]. يجب أن يعمل من المربع مع now.sh ولديه إعادة تحميل وتصدير تم تكوينه بشكل صحيح:
https://github.com/sheerun/extracted-loader/tree/master/examples/with-next
psycura أرى أنك تستخدم Windows لذا فقد لا يعمل من أجلك على الفور ولكن يرجى إرسال العلاقات العامة الإصلاح
sheerun
في ١٢ ديسمبر ٢٠١٧
👎 عار لـ Nextjs لأنه لا يسمح بالعمل مع ملفات css الخارجية. هناك الكثير من الحزم الجاهزة مع أوراق الأنماط الخاصة بها والتي أود استخدامها في مشروعي. لكن لا أستطيع! لقد جربت عدة خيارات ولكن لا أحد يعمل حقًا: لقد أمضيت يومًا في هذا بالفعل.
mkozhukharenko
في ٢٠ ديسمبر ٢٠١٧
mkozhukharenko يعمل مع ملفات css و scss. سأضيف مثالًا باستخدام https://github.com/coox/styled-jsx-css-loader . يقوم بتحميل css الخارجية كمجال أو على غرار jsx العام. بالنسبة إلى scss العامة العامة ، أقترح استخدام node-sass و postcss.
arefaslani
في ٢٠ ديسمبر ٢٠١٧
arefaslani لقد جربت كل الخيارات ، ولم ينجح معي. أنا محبط تمامًا من هذا الإطار. كيف يمكن أن تكون مهمة سهلة للغاية على الأرض صعبة؟ لن أستخدم إطار العمل ذي الرأي هذا مرة أخرى.
mkozhukharenko
في ٢٠ ديسمبر ٢٠١٧
mkozhukharenko انظر إلى هذا المثال: https://github.com/arefaslani/next.js/tree/canary/examples/with-external-scoped-scss. أقوم بإنشاء طلب سحب لإضافته إلى أمثلة الريبو الرئيسية.
arefaslani
في ٢٠ ديسمبر ٢٠١٧
فقط حاول إضافة المزيد من css إلى ملفك وسترى أن styled-jsx لا يمكنه التعامل مع ذلك. أحصل على "jsx-undefind" غير قادر على cound أو لا يمكن العثور على "jsx-4231512" أخطاء
mkozhukharenko
في ٢٠ ديسمبر ٢٠١٧
arefaslani هل هناك طريقة لاستخدام هذا النمط مع
import classes from './styles.scss'
const MyComponent = () => (
<header className={classes.header}>Hello</header>
)
protoEvangelion
في ٢٦ ديسمبر ٢٠١٧
protoEvangelion لسوء الحظ ، يعمل حاليًا فقط مع style-jsx.
arefaslani
في ٢٦ ديسمبر ٢٠١٧
اووو طيب شكرا على الرد السريع :)
protoEvangelion
في ٢٦ ديسمبر ٢٠١٧
إنه لأمر مخز أن لا يفكر بناء next.js في إعادة استخدام الموارد الموجودة في البداية. يا له من مضيعة للوقت في إعداد قواعد معقدة لملف css فقط.
slavikshen
في ٢٨ ديسمبر ٢٠١٧
أنا أعمل على حل لهذه المشكلة يسمح لجميع أدوات تحميل حزمة الويب بالعمل.
timneutkens
في ٢٨ ديسمبر ٢٠١٧
أود أيضًا أن أشير إلى أنني شخصياً لا أحب اللهجة التي يستخدمها الناس في هذه القضية.
أفهم تمامًا أنك تريد استيراد css. ونحن مدركون تمامًا لهذا الطلب. لهذا قضيت الأسبوع الماضي في العمل على أفضل حل ممكن 👍
المزيد عن هذا قريبًا. حتى ذلك الحين ، من فضلك كوني لطيفة وعطلة سعيدة
timneutkens
في ٢٨ ديسمبر ٢٠١٧
مرحبًا بالجميع ، لقد وجدت حلاً على جيثب الآخر ،
استخدم أداة تحميل الهيكل لاتباع قواعد BEM لتحقيق نفس تأثير وحدات css ،
لأنك ستحتاج إلى إنشاء .scss.json ، ثم استخدام المهملات لحذف ملف .scss.json الذي تم إنشاؤه. على الرغم من أنه ليس مثاليًا ، أريد أن أرسل لك لمعرفة ما إذا كانت هناك طرق أخرى أفضل.
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
في ٦ يناير ٢٠١٨
timneutkens كيف تسير الأمور مع الحل الخاص بك؟
Bobeta
في ٨ يناير ٢٠١٨
لقد قمت بإنشاء النموذج المعياري التالي الذي يدعم استيراد scss و css والعديد من الميزات الأخرى. ألقِ نظرة عليه وإذا أعجبك ، فامنحه نجمة ؛)
https://arefaslani.github.io/next-boilerplate
arefaslani
في ٨ يناير ٢٠١٨
Bobeta لقد الجانبية التي أريد إصلاحها قبل إرسال العلاقات العامة.
timneutkens
في ٨ يناير ٢٠١٨
timneutkens عظيم أن نسمع! متى تتوقع أن يتم نشرها؟
Bobeta
في ١٦ يناير ٢٠١٨
Bobeta أنا متأكد من أنه
jthegedus
في ١٦ يناير ٢٠١٨
jthegedus أنا متأكد من أنه سيفعل ذلك أيضًا ، لكني أتساءل عن التقديرات حتى يتمكن الأشخاص من اتخاذ قراراتهم بناءً على ذلك timneutkens
Bobeta
في ١٦ يناير ٢٠١٨
القضايا ذات الصلة
pie6k
·
3تعليقات
kenji4569
·
3تعليقات
flybayer
·
3تعليقات
rauchg
·
3تعليقات
sospedra
·
3تعليقات
التعليق الأكثر فائدة
أود أيضًا أن أشير إلى أنني شخصياً لا أحب اللهجة التي يستخدمها الناس في هذه القضية.
أفهم تمامًا أنك تريد استيراد css. ونحن مدركون تمامًا لهذا الطلب. لهذا قضيت الأسبوع الماضي في العمل على أفضل حل ممكن 👍
المزيد عن هذا قريبًا. حتى ذلك الحين ، من فضلك كوني لطيفة وعطلة سعيدة