Modulaire stijlbladen zijn een manier om uw CSS code beter te organiseren en de leesbaarheid van uw project te verbeteren. In plaats van één groot CSS bestand, kunt u met modulaire stijlbladen uw CSS opsplitsen in verschillende bestanden die elk gerelateerd zijn aan een specifiek deel van uw React app.
Hier is een eenvoudig stappenplan om modulaire stijlbladen te gebruiken in een React project:
1. Installeer css-loader en style-loader met npm:
\`\`\` npm install —save-dev css-loader style-loader \`\`\`1. Voeg het volgende toe aan uw webpack.config.js:
\`\`\`javascript module: { rules: [ { test: /.css$/, use: [ ‘style-loader’, { loader: ‘css-loader’, options: { modules: true, }, }, ], }, ], }, \`\`\`1. Maak een CSS bestand aan en importeer het in uw React component. Bijvoorbeeld, als u een component `MyComponent` heeft, kunt u een gerelateerd CSS bestand maken genaamd `MyComponent.module.css`.
\`\`\`css /_ MyComponent.module.css _/ .myClass { font-size: 16px; } \`\`\`1. In uw React component kunt u de stijlen nu importeren en toepassen:
\`\`\`javascript // MyComponent.js import React from ‘react’; import styles from ‘./MyComponent.module.css’; const MyComponent = () => { returnDe sleutel tot deze aanpak is de css-loader configuratie. De optie `modules: true` zorgt ervoor dat elke geïmporteerde CSS als een JavaScript object wordt behandeld. U kunt dan toegang krijgen tot elke klas in dat object, wat betekent dat u uw CSS klassen kunt beheren op dezelfde manier als u JavaScript objecten beheert. Bovendien zorgt deze aanpak ervoor dat elke CSS klas uniek is, zodat er geen risico is op conflicterende klassenamen.
N.B: De bovengenoemde werkwijze vereist dat u webpack gebruikt in uw project. In Create React App projecten is css-loader reeds geconfigureerd, zodat u gewoon .module.css bestanden kunt gebruiken om CSS modules in te schakelen.
