CSS और styling

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 करें।

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 का उपयोग करें।

त्वरित जाँच

त्वरित जाँच: CSS को extract करने का advantage क्या है?

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