الصفحة الرئيسية>المتعلقة بالبرمجة>كود الذكاء الاصطناعي
تنزيل

next.js + antd (مع أقل)

استخدم antd (أقل) w/ next.js ، Zero Tremency على plugins التالية.

العرض التوضيحي

Demo w/ next.js v12 بواسطة mkn

العرض التوضيحي مع CRA V5 بواسطة MKR

نعم! يدعم هذا البرنامج المساعد كل من Next.js و CRA منذ V1.0.

سمات

  • ZERO TEMENTENT على الإضافات الأخرى next.js
  • دعم كل من مشروع Next.js & CRA
  • دعم الحدث الساخن بعد تعديل أقل antd vars
  • دعم وضع الخادم
  • دعم Antd Pro

التوافق

  • Next.js v11 / v12
  • CRA V4 / V5

تثبيت 

yarn add next-plugin-antd-less
yarn add --dev babel-plugin-import

الاستخدام

لـ Next.js 

 // next.config.js
const withAntdLess = require ( 'next-plugin-antd-less' ) ;

module . exports = withAntdLess ( {
  modifyVars : { '@primary-color' : '#04f' } , // optional
  lessVarsFilePath : './src/styles/variables.less' , // optional 
  lessVarsFilePathAppendToEndOfContent : false , // optional
  // optional https://github.com/webpack-contrib/css-loader#object
  cssLoaderOptions : {
    // ... 
    mode : "local" ,
    localIdentName : __DEV__ ? "[local]--[hash:base64:4]" : "[hash:base64:8]" , // invalid! for Unify getLocalIdent (Next.js / CRA), Cannot set it, but you can rewritten getLocalIdentFn
    exportLocalsConvention : "camelCase" ,
    exportOnlyLocals : false ,
    // ...
    getLocalIdent : ( context , localIdentName , localName , options ) => {
      return "whatever_random_class_name" ;
    } ,
  } ,

  // for Next.js ONLY
  nextjs : {
    localIdentNameFollowDev : true , // default false, for easy to debug on PROD mode
  } ,

  // Other Config Here...

  webpack ( config ) {
    return config ;
  } ,

  // ONLY for Next.js 10, if you use Next.js 11, delete this block
  future : {
    webpack5 : true ,
  } ,
} ) ;

إضافة .babelrc.js 

 // .babelrc.js
module . exports = {
  presets : [ [ 'next/babel' ] ] ,
  plugins : [ [ 'import' , { libraryName : 'antd' , style : true } ] ] ,
} ;

يمكن العثور على التكوين التفصيلي في ملف next.config.js .

لـ CRA / CRA-CO 

 const cracoPluginLess = require ( 'next-plugin-antd-less/overrideWebpackConfig' ) ;

module . exports = {
  babel : cracoBabel ,
  plugins : [
    cracoPluginAnalyze ,
    {
      plugin : cracoPluginLess ,
      options : {
        modifyVars : {
          '@THEME--DARK' : 'theme-dark' ,
        } ,
        lessVarsFilePath : './src/styles/variables.less' ,
        cssLoaderOptions : {
          localIdentName : __DEV__ ? "[local]--[hash:base64:4]" : "[hash:base64:8]" ,
        } ,
      } ,
    } ,
  ] ,
} ;

يمكن العثور على تكوين مفصل في ملف craco.config.js .

التعليمات

مشروع مرجعي؟

إذا كان لديك أي مشكلة ، فيرجى التحقق من MKN (next.js) و MKR (CRA) أولاً ، أقوم بتحديث هذين الريبو في كل مرة أقوم فيها بتحديث هذا البرنامج المساعد.

اسم classname الافتراضي

وضع اسم الفصل على سبيل المثال
ديف [local]--[hash:base64:4] comp-wrapper--2Rra
همز [hash:base64:8] 2Rra8Ryx

لتوحيد getlocalident (next.js / cra) ، لا يمكن تعيينه ، ولكن يمكنك إعادة كتابة getlocalidentfn

LocalIdentName غير صالح؟ كيف أعيد كتابتها؟

يمكنك defind your localIdentName في pluginOptions.cssLoaderOptions.modules.getLocalIdent 

  options: {
  lessVarsFilePath: './src/styles/variables.less'
  // ...
  // https://github.com/webpack-contrib/css-loader/tree/b7a84414fb3f6e6ff413cbbb7004fa74a78da331#getlocalident
  //
  // and you can see file 
  // https://github.com/SolidZORO/next-plugin-antd-less/getCssModuleLocalIdent.js
  getLocalIdent: ( context , _ , exportName , options ) => {
    return 'whatever_random_class_name' ;
  }
  // ...
}

كيفية استيراد نمط CSS العالمي (على سبيل المثال Styles.css)؟ 

 // ./page/_app.tsx
//
// use `import` or `require` syntax,
import './styles.css' ;

كيفية استيراد نمط Less عالميا (على سبيل المثال أنماط. بلا)؟ 

 // ./page/_app.tsx
//
// use `require` syntax,
require ( './styles.less' ) ;

كيف antd متغيرات أقل؟ 

 // ./src/styles/variables.less
@import ' ~antd/lib/style/themes/default.less ' ; // <-- you need to import antd variables once in your project

@primary-color : #04f ; // change antd primary-color 
 // ?️ Tips: if your use babel import plugin and set `libraryDirectory`, please keep `libraryDirectory` and `less path` consistent.

// lib
[ 'import' , { libraryName : 'antd' , libraryDirectory : 'lib' , style : true } ]
// `@import '~antd/lib/style/themes/default.less';` <-- use `lib`

// es
  [ 'import' , { libraryName : 'antd' , libraryDirectory : 'es' , style : true } ]
// --> `@import '~antd/es/style/themes/default.less';` <-- use `es` 
 // plugin options
lessVarsFilePath: './src/styles/variables.less'

seemore قضايا #36 ، #74

خلفية

مشاكل

منذ Next.js 9.3 يدعم sass و css افتراضيًا ، ولكنه لا يدعم less . إذا كنت تستخدم Next.js> 9.3 واستخدمت المكون الإضافي الرسمي الأقل ، فستواجه بالتأكيد المشكلات التالية.

  1. Warning: Built-in CSS support is being disabled due to custom CSS configuration being detected.

  2. لا يدعم التعرف التلقائي على وحدات CSS ، على a.less a.module.less

حل

  1. ابحث عن sassmodule ونسخ ONEC واستبدل sass-loader بداخلها مع less-loader .

  2. ثم قم بتمكين modules.auto css-loader . هذا يمكن أن css-loader مع كل *.less بدون حاجة لتطابقه هو *.module.less أو *.less .

هذه هي أدنى طريقة للتكلفة ، ولن تظهر CLI هذا التحذير المثير للاشمئزاز. والشيء المهم هو أن هناك أي اعتماد صفر على الألواح القادمة الأخرى. .

رخصة

MIT © Jason Feng

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل