ASP.NET Core CSS 与 Webpack 隔离

Question

我的 ASP.NET Core RazorPages 项目使用 Webpack。我也想使用 CSS 隔离。

每个 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

我找到了方法：

1. css 隔离文件必须是 css - 不能是 scss。因此，请安装一个在保存时编译 scss->css 的 IDE 扩展，或者将其添加为构建步骤，以便在 CI 中可用。将其配置为就地编译

   SomePage.cshtml.scss

   到

   SomePage.cshtml.css

   。

2. 通过添加到 cproj 文件来禁用运行时的自动捆绑：

<DisableScopedCssBundling>true</DisableScopedCssBundling>

3. 配置 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
}

4. 删除

   MyProject.styles.css

   中对

   Layout.cshtml

   的引用，并将其替换为新的 webpack 包

   razor.css

   。

5. 将

   *.cshtml.css

   添加到

   .gitignore

由于需要 (1) 中的解决方法，这并不理想。不过，它工作得很好。

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