next plugin antd less

next.js + antd (적은)

antd (Less) w/ next.js, 다른 다음 플루그인에 대한 제로 의존성을 사용하십시오.

데모

MKN의 Demo w/ next.js v12

MKR의 Demo w/ CRA V5

네! 이 플러그인은 v1.0 이후 Next.js와 CRA를 모두 지원합니다.

특징

• 다른 Next.js 플러그인에 대한 의존성이 없습니다
• Next.js & CRA 프로젝트를 모두 지원합니다
• ANTD가 적은 vars를 수정 한 후 핫 업데이트를 지원하십시오
• 서버리스 모드를 지원합니다
• Antd Pro를 지원합니다

호환성

• 다음 .js v11 / v12
• CRA V4 / V5

설치

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

용법

다음 .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 파일에서 찾을 수 있습니다.

FAQ

참조 프로젝트?

문제가 있으면 먼저 MKN (Next.js) 및 MKR (CRA)을 확인하십시오.이 플러그인을 업데이트 할 때 마다이 두 개의 리포지어를 업데이트하십시오.

기본 클래스 이름

방법	클래스 이름	예를 들어
데브	[local]--[hash:base64:4]	comp-wrapper--2Rra
찌르다	[hash:base64:8]	2Rra8Ryx

Unify getLocalident (next.js / cra)의 경우 설정할 수는 없지만 getLocalidentfn을 다시 작성할 수 있습니다.

LocalIdentName이 유효하지 않습니까? 다시 작성하는 방법?

pluginOptions.cssLoaderOptions.modules.getLocalIdent 에서 자신의 localIdentName 삭제할 수 있습니다

  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 스타일을 가져 오는 방법 (예 : Styles.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

배경

문제

JS 9.3은 기본적으로 sass 및 css 지원하지만 less 하지는 않습니다. Next.js> 9.3 사용하고 공식 덜 덜 플러그인을 사용하는 경우 다음과 같은 문제가 발생합니다.

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

2. CSS 모듈의 자동 인식을 지원하지 a.module.less a.less

해결책

1. SassModule을 찾고 ONEC를 복사하고 내부의 sass-loader less-loader 로 교체하십시오.

2. 그런 다음 css-loader 의 modules.auto 활성화하십시오. 이것은 단순히 모든 *.less 와 일치 할 수 있습니다 (일치 할 필요 css-loader 없습니다. *.module.less 또는 *.less ).

이것은 비용이 가장 낮은 방법이며 CLI는 더 이상이 역겨운 경고를 보여주지 않습니다. 중요한 것은 다른 다음 플루그인에 대한 의존성이 없다는 것입니다. .

특허

MIT © Jason Feng