Como utilizar NextJS com Less · henriquezolini

Neste post irei te ajudar com uma dúvida que eu vejo percorrendo pela internet: como utilizar NextJS com Less.

O Less é um pré-processador para CSS que possui sua sintaxe também baseada em CSS, tornando-se um framework fácil, flexível e dinâmico para desenvolvimento web.

Meus problemas começaram quando eu tentei utilizar o design system Ant Design com o Next JS, se você já tentou fazer essa integração deve ter se deparado com o mesmo problema, isso porque o Ant Design foi desenvolvido com seus estilos em Less e infelizmente o NextJS em sua versão atual (v13) não tem suporte para o Less, somente para o Scss.

Você pode importar somente o Css do Ant Design e funcionará normalmente, mas seus problemas começam quando você precisar alterar as variáveis globais da folha de estilos como: primary-color, base-radius, base-space e etc...

Ao procurar por uma solução encontrei varias bibliotecas como: next-with-less e next-plugin-antd-less; que prometiam fazer essa junção utilizando as configurações do next.config.js. Eu não irei entrar muito em detalhes para focar apenas na solução, que acredito que é o que você precisa, mas resumindo elas não funcionam direito, em alguns momentos você irá ter problemas e no final será uma dor de cabeça.

A solução mais prática que eu encontrei e que funcionou perfeitamente foi a de utilizar o gulp como processador e importar o css gerado no meu projeto.

Para você realizar essa integração que você pode fazer é começar instalando estas dependências de desenvolvimento em seu projeto (package.json):

"devDependencies": {\
  "autoprefixer": "^9.8.4",\
  "concurrently": "^5.3.0",\
  "gulp": "^4.0.2",\
  "gulp-csso": "^4.0.1",\
  "gulp-debug": "^4.0.0",\
  "gulp-less": "^4.0.1",\
  "gulp-postcss": "^8.0.0",\
  "less-plugin-npm-import": "^2.1.0",\
  "through2": "^4.0.2"\
}

E criar este arquivo gulpfile.js na raiz do seu projeto

const gulp = require('gulp')\
const gulpless = require('gulp-less')\
const postcss = require('gulp-postcss')\
const debug = require('gulp-debug')\
const csso = require('gulp-csso')\
const autoprefixer = require('autoprefixer')\
const NpmImportPlugin = require('less-plugin-npm-import')\
const through2 = require('through2')/* touch() - Isso é necessário para que a data de modificação do arquivo seja atualizada e o next recompilado automaticamente. */const touch = () =>\
  through2.obj(function (*file*, *enc*, *cb*) {\
  if (file.stat) {\
     file.stat.atime = file.stat.mtime = file.stat.ctime = new *Date*()\
  }\
  cb(null, file)\
})gulp.task('theme', function () {\
  const plugins = [autoprefixer()]

  return gulp\
    .src('src/styles/styles.less')\
    .pipe(debug({ title: 'Less files:' }))\
    .pipe(\
      gulpless({\
        javascriptEnabled: true,\
        plugins: [new NpmImportPlugin({ prefix: '~' })]\
      })\
    )\
    .pipe(postcss(plugins))\
    .pipe(\
       csso({\
         debug: true\
       })\
    )\
   .pipe(touch())\
   .pipe(gulp.dest('./src/styles'))\
})gulp.task('watch', function () {\
   return gulp.watch('src/styles/**/*.less', gulp.series('theme'))\
})

e alterar o seu script dev do package.json para:

"dev": "concurrently \"next dev\" \"gulp watch\"",

Isso irá fazer com que seu "next dev" rode junto com o seu "gulp watch" e sempre que alguma alteração aconteça seja no seu projeto ou em arquivos less o seu projeto seja re-compilado automaticamente.

Dentro da pasta ./styles você pode criar um arquivo styles.less contendo algo como:

@import '~antd/dist/antd.less';@primary-color: #21B573;// ... outros estilos

Após isso ele sempre irá buscar o arquivo principal ./styles/styles.less e compilar para um ./styles/styles.css que você poderá deixar importado normalmente no seu projeto Next JS.

Deixei um repositório no meu GitHub:
https://github.com/henriquezolini/next-with-less

É isso pessoal, espero ter te ajudado a utilizar o Next JS com Less! Até a próxima!