相关疑难解决方法(0)

我有一个基于 Webpack 4 的 SSR React-TypeScript 应用程序，我对每个 React 组件使用 SCSS。我使用了两个 Webpack 配置文件，一个用于客户端包，一个用于服务器包。

我对如何使用 MiniCssExtractPlugin 在客户端 Webpack 配置上加载我的 SCSS 感到困惑。该文档不是很有帮助。很明显，这个规则在模块内部是必要的：

{
    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; …