ASP.NET 核心 CSS 与 Webpack 隔离

Question

我的 ASP.NET 核心 RazorPages 项目使用 Webpack。我也想用 CSS Isolation.

每个 RazorPage Foo.cshtml 都有一个关联的 css 文件 Foo.cshtml.css。它们经过运行时 css 隔离和捆绑，并放置在 obj/ 的子目录中。运行时似乎为 wwwroot/ProjectName.styles.css 中的最终包提供服务（但实际上并不存在，它是一个“实现细节”）。

错误的选项 1：使用 Webpack。我可以将它们重命名为 Foo.cshtml.scss 并使它们可用于 Webpack。但我怀疑是否有可能（？）编译它们（就地和非捆绑）以便运行时可以找到它们。

错误选项 2：使用运行时。我可以将它们完全从 Webpack 中排除，并允许运行时管理它们。但是我不能使用 scss 或缩小。

如何同时使用 CSS 隔离功能和 Webpack？

Answer 1

我找到了一个方法：

css 隔离文件必须是 css - 不能是 scss。因此，安装一个 IDE 扩展，在保存时编译 scss->css，或者，将其添加为构建步骤，以便它在 CI 中可用。配置它编译 in-place SomePage.cshtml.scss 到 SomePage.cshtml.css.
运行时禁用automatic bundling，方法是添加到 cproj 文件：

<DisableScopedCssBundling>true</DisableScopedCssBundling>

配置 webpack 以输出另一个包，专门用于隔离的 css 文件：

entry: {

  site:  // normal site bundle

  razor: // css files in obj/(Debug|Release)/net6.0/scopedcss/**/*.css
         // can use glob.sync() above to find all css files automatically
}

删除 Layout.cshtml 中对 MyProject.styles.css 的引用，并将其替换为新的 webpack 包 razor.css.
将*.cshtml.css添加到.gitignore

由于需要 (1) 中的解决方法，这并不理想。然而，它完美地工作。

如果我找到更好的方法，我会更新它。 如果您有更好的答案，请补充。

ASP.NET 核心 CSS 与 Webpack 隔离

ASP.NET Core CSS Isolation with Webpack

c#

asp.net-core

webpack

asp.net-core-6.0

asp.net-core-razor-pages