# CSS और styling — Webpack

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

> Webpack के साथ CSS को bundle और optimize करें।

## 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 क्या है?

- [x] Caching और parallel downloads को enable करता है।
- [ ] CSS file size को reduce करता है।
- [ ] CSS को use होने से prevent करता है।

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