Webpack ရှိ CSS ဘန်ဒါကို ပြင်ဆင်ခြင်း

စာမျက်နှာသို့ CSS ထည့်သွင်းခြင်း လေ့လာထားသော နည်းလမ်းသည် အလွန်အဆင်ပြေချင်မှပြေနိုင်သည်။ မကြာခဏဆိုသလို အလုပ်အများဆုံးမှာ CSS ဖိုင်အားလုံးကို သီးခြား စတိုင်ဘန်ဒါတစ်ခုတွင် စုစည်းခြင်းဖြစ်သည်။

ထိုသို့ပြုလုပ်ရန် mini-css-extract-plugin ပလပ်အင်လိုအပ်သည်။ ထို့ကြောင့် ထိုပလပ်အင်ကို တပ်ဆင်ကြပါစို့။

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

ယခု ထိုပလပ်အင်ကို တင်သွင်းကြပါစို့။

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

ယခု plugins ပြင်ဆင်ချက်သို့ ထည့်သွင်းကြပါစို့။

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

ယခု style-loader ကို ကျွန်ုပ်တို့၏ပလပ်အင်မှ လိုဒါဖြင့် အစားထိုးကြပါစို့။

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