NextJS හි CSS මොඩියුල

NextJS හි දැනටමත් CSS මොඩියුල සඳහා අන්තර්ගත සහාය ඇත. ඒවා වෙනම CSS ගොනු වන අතර, එහි පන්ති නම් ස්ථානීය දෘෂ්ටි ක්ෂේත්‍රය තුළ පවතින අතර, මෙයින් විවිධ සංරචකවලින් පැමිණෙන පන්ති නම් අතර ගැටුම් වළක්වා ගත හැක.

අපි බලමු ඒවා භාවිතා කරන්නේ කෙසේද කියා. අපට නිශ්චිත සංරචකයක් ඇතැයි සිතමු:

app/test/page.jsxexport default function Test() {
  return <p>
    text text text
  </p>;
}

අපි ඒ සඳහා CSS මොඩියුලයක් සාදමු. මෙය සිදු කිරීම සඳහා, එම ෆෝල්ඩරයේම අවසන් අකුරු සහිත ගොනුවක් සාදන්න .module.css සහ අත්‍යවශ්‍ය නමක්. එහිදී, පහත CSS පන්තිය ලියන්න:

app/test/test.module.css.text {
  color: blue;
}

අපගේ CSS මොඩියුලය සංරචක ගොනුවට ආයාත කරමු:

app/test/page.jsximport styles from './test.module.css';

export default function Test() {
  return <p>
    text text text
  </p>;
}

දැන් අපි CSS පන්තිය යොදමු අපගේ සංරචකය තුළ ඇති ඡේදයට:

app/test/page.jsximport styles from './test.module.css';

export default function Test() {
  return <p className={styles.text}>
    text text text
  </p>;
}