Usanidi wa Kukusanya CSS kwenye Mfuro (Bundle) katika Webpack

Njia tuliyojifunza ya kuongeza CSS kwenye ukurasa inaweza kuwa sio nzuri sana. Mara nyingi ni rahimu zaidi kukusanya faili zote za CSS kwenye mfuro (bundle) tofauti wa mitindo.

Kwa hili unahitaji programu-jalizi (plugin) mini-css-extract-plugin. Tuipakie:

terminalnpm install mini-css-extract-plugin --save-dev

Tuitoe:

webpack.config.jsimport MiniCssExtractPlugin from 'mini-css-extract-plugin';

Tuiongeze kwenye usanidi wa plugins:

webpack.config.jsexport default {
  entry: './src/index.js',
  plugins: [new MiniCssExtractPlugin()],
};

Sasa tubadilishe style-loader kwa kilochaji (loader) kutoka kwa programu-jalizi yetu:

webpack.config.jsexport default {
  entry: './src/index.js',
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
};