next plugin antd less

Next.js + Antd (mit weniger)

Verwenden Sie AntD (weniger) w/ Next.js, keine Abhängigkeit von anderen nächsten Pluginen.

Demo

Demo mit nächsten.js v12 von MKN

Demo mit CRA V5 von MKR

Ja! Dieses Plugin unterstützt seit V1.0 sowohl die nächsten.js als auch die CRA.

Merkmale

• Null Abhängigkeit von anderen nächsten.js Plugins
• Unterstützen Sie sowohl Next.js & CRA Project
• Unterstützen
• Unterstützen Sie den serverlosen Modus
• Unterstützen Sie Antd Pro

Kompatibilität

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

Installation

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

Verwendung

für 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 ,
  } ,
} ) ;

Fügen Sie a .babelrc.js hinzu

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

Eine detaillierte Konfiguration finden Sie in next.config.js Datei.

Für 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]" ,
        } ,
      } ,
    } ,
  ] ,
} ;

Eine detaillierte Konfiguration finden Sie in der Datei craco.config.js .

FAQ

Referenzprojekt?

Wenn Sie ein Problem haben, überprüfen Sie bitte MKN (Next.js) und MKR (CRA). Er aktualisiere diese beiden Repos jedes Mal, wenn ich dieses Plugin aktualisiere.

Standardklassenname

MODUS	Klassenname	z.B
Dev	[local]--[hash:base64:4]	comp-wrapper--2Rra
Prod	[hash:base64:8]	2Rra8Ryx

Für Unify GetLocalident (next.js / cra) kann es nicht festgelegt, aber Sie können GetLocalidentFn neu geschrieben

LOCALIDEDNAME ist ungültig? Wie habe ich neu geschrieben?

Sie können Ihren eigenen localIdentName in pluginOptions.cssLoaderOptions.modules.getLocalIdent definieren

  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' ;
  }
  // ...
}

Wie importiere ich den globalen CSS -Stil (EG styles.css)?

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

Wie importiere ich global Less Stil (z. B. Styles.less)?

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

Wie kann man antd weniger Variablen überschreiben?

 // ./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 Ausgaben #36, #74

Hintergrund

Probleme

Seit nächsten.js 9.3 unterstützt sass und css standardmäßig, unterstützt jedoch nicht less . Wenn Sie Next.js> 9.3 verwenden und das offizielle weniger Plugin verwenden, werden Sie auf jeden Fall auf die folgenden Probleme stoßen.

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

2. Unterstützt die automatische Erkennung von CSS -Modulen nicht, z. a.module.less a.less

Lösung

1. Finden Sie Sassmodule und kopieren Sie ONEC und ersetzen Sie den sass-loader in less-loader .

2. Aktivieren Sie dann die modules.auto Option von css-loader . css-loader kann einfach mit *.less *.less *.module.less

Dies ist der niedrigste Weg, und CLI wird diese ekelhafte Warnung nicht mehr zeigen. Wichtig ist, dass es keine Abhängigkeit von anderen nächsten Pluginen gibt. .

Lizenz

MIT © Jason Feng