# CSS और styling — Webpack: Module Bundling और Build Optimization

Source: https://www.skillbyai.com/hi/webpack/webpack-10

> style-loader या MiniCssExtractPlugin से CSS bundle करें, CSS modules से class names scope करें और production में styles cache करें।

## CSS bundling strategies

CSS को import करके style-loader के माध्यम से DOM में inject किया जा सकता है, या MiniCssExtractPlugin का उपयोग करके अलग files में extract किया जा सकता है। Extracted CSS caching और parallel downloads को allow करता है।

## CSS को files में extract करें

Production builds के लिए MiniCssExtractPlugin को configure करें।

```javascript
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [{
      test: /\.css$/,
      use: [
        process.env.NODE_ENV === 'production' 
          ? MiniCssExtractPlugin.loader 
          : 'style-loader',
        'css-loader'
      ]
    }]
  },
  plugins: [new MiniCssExtractPlugin()]
};
```

Output:

```
CSS extracted to separate .css files in production
```

## CSS module scoping

CSS modules को enable करके class names को locally scope करें, conflicts को avoid करें। Loader option modules: true का उपयोग करें।

त्वरित जाँच

**Quiz:** CSS को extract करने का advantage क्या है?

- [ ] CSS file size को reduce करता है।
- [ ] CSS को use होने से prevent करता है।
- [x] Caching और parallel downloads को enable करता है।
- [ ] CSS-in-JS की जरूरत खत्म करना।

*Answer:* Caching और parallel downloads को enable करता है।. Extracted CSS files को separately cache किया जा सकता है और JavaScript के साथ parallel में download किया जा सकता है।