Nos ultimos meses eu venho trabalhando com SCSS em diversos tipos de projetos, e como eu tenho cada vez mais me interessado pelo NextJS, e eu gostaria de integra-lo. Por isso venho através deste super simples mini-tutorial explicar como eu realizo tal atividade.
Já com nosso projeto iniciado vamos começar instalando alguns pacotes, neste exemplo estarei usando o yarn
como meu Package Manager, porem, fique a vontade em usar com npm
caso prefira.
Para começar vamos instalar o pacote do Sass usando um destes dois comandos:
yarn add sass
ou
yarn add node-sass
Logo após vamos instalar o Plugin do Next. Para quem não esta familiarizado os Plugins do Next, basicamente eles adicionam funcionalidades sem necessidade de configuração extra.
Para instalar o Plugin do SASS/SCSS criado pelo time do Next vamos usar o seguinte comando no terminal do projeto:
yarn add @zeit/next-sass
Agora vamos definir o padrão do SASS/SCSS no nosso projeto, fazendo algumas alterações no arquivo next.config.js
, caso seu projeto não tenha este arquivo, basta criar com este mesmo nome. Então vamos colocar neste arquivo a seguinte configuração:
const path = require("path");
const withSass = require("@zeit/next-sass");
module.exports = withSass({
cssModules: true,
});
module.exports = {
/* Adicione sua pasta padrão de SCSS aqui! */
sassOptions: {
includePaths: [path.join(__dirname, "styles")],
},
};
Agora você pode começar a criar e usar arquivos SCSS/SASS que os mesmos funcionaram perfeitamente.
Lembre-se de sempre importar seus arquivos com a extensão .scss
ao invés de .css
.