À medida que seu aplicativo ou site cresce, fica cada vez mais difícil trabalhar com apenas um arquivo CSS. Esse aumento no tamanho pode levar a muitos problemas, como tentar ter nomes de seletor diferentes e rolar para cima e para baixo para localizar e editar um único seletor em um arquivo enorme.

Com os Módulos CSS , você pode escrever suas regras CSS tradicionalmente, mas os estilos são consumidos com JavaScript e com escopo local para evitar efeitos colaterais indesejados em outros lugares. Isso é conseguido criando um nome de classe exclusivo para seletores CSS, permitindo que você use o mesmo nome de classe CSS em arquivos diferentes sem se preocupar com colisões de nomes. Além disso, você não precisa criar nomes de seletor diferentes, dando total flexibilidade e capacidade de reutilização de CSS dentro dos componentes.

Em suma, os módulos CSS são folhas de estilo baseadas em componentes que nos permitem criar contidos, CSS modular criando classes exclusivas e seletores de escopo.

Neste artigo, praticaremos o uso de módulos CSS com um projeto de demonstração Webpack para aprender como configurar um aplicativo para escapar do problema de escopo global notoriamente complicado do CSS.

Configurando o Webpack

Vamos começar configurando o Webpack. Nosso aplicativo de demonstração tem uma pasta src contendo index.html, style.css e index.js.

Fora da pasta src, temos nosso pacote webpack.config.js, babel.config.js. arquivos json e package-lock.json.

Você pode usar o comando npm run build para construir o projeto e npm run dev para iniciar o aplicativo no localhost 8080.

Agora, no arquivo package.json, devemos ter webpack, webpack-cli, webpack-dev-server, html-webpack-plugin instalados.

Os módulos relacionados ao babel são para transformar o JavaScript moderno em um antigo sintaxe, e CleanWebpackPlugin excluirá o conteúdo da pasta dist toda vez que o projeto for compilado.

Para o arquivo webpack.config.js, temos algumas configurações escritas assim:

const path=require (“caminho”); const HtmlWebpackPlugin=require (“html-webpack-plugin”); const {CleanWebpackPlugin}=require (“clean-webpack-plugin”); module.exports={entry: {main:”./src/index.js”,}, output: {path: path.resolve (__ dirname,”dist”), filename:”main.js”, publicPath:””,}, target: [“web”,”es5″], stats: {children: true}, mode:”development”, devServer: {static: path.resolve (__ dirname,”./dist”), compress: true , porta: 8080, abrir: verdadeiro,}, devtool:”inline-source-map”, módulo: {rules: [{test:/\\.js$/, loader:”babel-loader”, excluir:”/node_modules/”,},],}, plug-ins: [new HtmlWebpackPlugin ({template:”./src/index.html”,}), new CleanWebpackPlugin (),],};

Para trabalhar com módulos CSS, precisamos instalar style-loader e css-loader:

npm i css-loader–save-dev npm i style-loader–save-dev

Precisamos do módulo css-loader para interpretar @import e url () como import/require () e resolvê-los, junto com o módulo style-loader para injetar nosso CSS no DOM.

Configurando style-loader e css-loader

Temos o babel-loader já configurado em nosso array de regras; este é o lugar para adicionar nossos carregadores no Webpack.

Carregadores informam ao Webpack como para modificar os arquivos antes que eles sejam adicionados ao gráfico de dependência. A matriz de regras consiste em nossos carregadores e nos ajuda a realizar transformações em arquivos. Isso ajuda no carregamento de arquivos e imagens.

Observe que podemos encadear vários carregadores juntos. No bloco de código a seguir, css-loader e style-loader são usados ​​juntos.

Semelhante ao babel-loader, podemos carregar arquivos CSS para estilizar nossas páginas da seguinte maneira:

module: {rules: [{test:/\\.js$/, loader:”babel-loader”, exclude:”/node_modules/”,},//regras CSS {test:/\\.css$/, use: [“style-loader”, {loader:”css-loader”, options: {importLoaders: 1, modules: true,},},],},],},

Depois do babel-loader, temos vários outros objetos que procurará por quaisquer arquivos CSS e os transformará:

A chave de teste diz ao Webpack para aplicar esta regra a qualquer arquivo que termine com a extensão.css. A opção importLoaders recebe o valor 1, que define o número de carregadores aplicados antes dos Módulos CSS e da regra @import Finalmente, a opção modules: true habilita os Módulos CSS

Criando um arquivo HTML

Insi do HTML, temos um div com um nome de classe de elemento. Iremos acessar este elemento dentro de nosso arquivo JavaScript:

CSS Modules Webpack