reactjs - الاستخدام الصحيح لـ MiniCssExtractPlugin في تطبيق React-TypeScript مع التقديم من جهة الخادم (SSR)

لدي تطبيق SSR React-TypeScript، مبني على Webpack 4 وأستخدم SCSS لكل مكون React. أستخدم ملفي تكوين Webpack، واحد لحزمة العميل وواحد لحزمة الخادم.

أنا في حيرة بشأن كيفية استخدام MiniCssExtractPlugin لتحميل SCSS الخاص بي على إعدادات Webpack الخاصة بالعميل. الوثائق ليست مفيدة جدًا. من الواضح أن هذه القاعدة ضرورية داخل الوحدات:

{
    test: /\.scss$/,
    use: [
        MiniCssExtractPlugin.loader,
        "css-loader",
        "sass-loader"
    ]
}

ولكن ليس من الواضح أي ملف يجب أن يوضع هنا:

plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new MiniCssExtractPlugin({
        filename: devMode ? '[name].css' : '[name].[hash].css',
        chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
    })
],

ملفات SCSS الخاصة بي منتشرة في جميع أنحاء تطبيقي: كل مكون React لديه ملف SCSS خاص به. لا أعرف كيفية تمرير هذه الملفات إلى MiniCssExtractPlugin.

لإعداد خادم Webpack، لدي ما يلي لتحميل ملفات SCSS الخاصة بي ولا أعرف ما إذا كان ذلك كافياً أم لا:

{
    test: /\.scss$/,
    use: ["css-loader", "sass-loader"]
}

أود أن أرى مثالًا عمليًا لتطبيق مشابه، إذا كان ذلك ممكنًا.

ملف CSS الخاص بي كما تم إنشاؤه بواسطة MiniCSS:

.home {
  text-align: center; }

.home-logo {
  animation: home-logo-spin infinite 20s linear;
  height: 40vmin;
  pointer-events: none; }

.home-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white; }

.home-link {
  color: #61dafb; }

@keyframes home-logo-spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }


/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8vLi9zcmMvY2xpZW50L3ByZXNlbnRhdGlvbmFsLWNvbXBvbmVudHMvaG9tZS9Ib21lLnNjc3MiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUE7QUFDQSxxQkFBcUI7O0FBRXJCO0FBQ0E7QUFDQTtBQUNBLHVCQUF1Qjs7QUFFdkI7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBLGVBQWU7O0FBRWY7QUFDQSxpQkFBaUI7O0FBRWpCO0FBQ0E7QUFDQSw0QkFBNEI7QUFDNUI7QUFDQSw4QkFBOEIsRUFBRSIsImZpbGUiOiJzdHlsZXMuY3NzIiwic291cmNlc0NvbnRlbnQiOlsiLmhvbWUge1xuICB0ZXh0LWFsaWduOiBjZW50ZXI7IH1cblxuLmhvbWUtbG9nbyB7XG4gIGFuaW1hdGlvbjogaG9tZS1sb2dvLXNwaW4gaW5maW5pdGUgMjBzIGxpbmVhcjtcbiAgaGVpZ2h0OiA0MHZtaW47XG4gIHBvaW50ZXItZXZlbnRzOiBub25lOyB9XG5cbi5ob21lLWhlYWRlciB7XG4gIGJhY2tncm91bmQtY29sb3I6ICMyODJjMzQ7XG4gIG1pbi1oZWlnaHQ6IDEwMHZoO1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogY29sdW1uO1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjtcbiAgZm9udC1zaXplOiBjYWxjKDEwcHggKyAydm1pbik7XG4gIGNvbG9yOiB3aGl0ZTsgfVxuXG4uaG9tZS1saW5rIHtcbiAgY29sb3I6ICM2MWRhZmI7IH1cblxuQGtleWZyYW1lcyBob21lLWxvZ28tc3BpbiB7XG4gIGZyb20ge1xuICAgIHRyYW5zZm9ybTogcm90YXRlKDBkZWcpOyB9XG4gIHRvIHtcbiAgICB0cmFuc2Zvcm06IHJvdGF0ZSgzNjBkZWcpOyB9IH1cbiJdLCJzb3VyY2VSb290IjoiIn0=*/