next plugin antd less

next.js + antd（較少）

使用w/ next.js的antd（較少），對其他下一個plugins的依賴性為零。

演示

w/ next.js v12的演示

w/ w/ cra v5 by mkr

是的！此插件從v1.0開始支持Next.js和CRA。

特徵

• 零依賴於其他下一個插件
• 支持Next.js＆Cra項目
• 在修改ANTD之後，支持熱更新更少的VAR
• 支持服務器模式
• 支持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

模式	className	例如
開發	[local]--[hash:base64:4]	comp-wrapper--2Rra
產品	[hash:base64:8]	2Rra8Ryx

對於unify getLocalident（next.js / cra），無法設置它，但是您可以重寫getLocalidentfn

LocalentedName無效？如何重寫？

您可以在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樣式（例如樣式。少）？

 // ./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. 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，然後用less-loader sass-loader 。

2. 然後啟用modules.auto css-loader的AUTO選項。這可以簡單地匹配所有*.less （無需匹配它是*.module.less css-loader *.less 。

這是最低的成本方式，CLI將不再顯示此令人作嘔的警告。重要的是，對其他下一媒體的依賴性為零。 。

執照

麻省理工學院©Jason Feng