ASP.NET Core CSS 隔離與 Webpack

Question

我的 ASP.NET Core 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

我找到了一個方法：

1. css 隔離文件必須是 css - 它不能是 scss。 因此，安裝一個 IDE 擴展，在保存時編譯 scss->css，或者，將其添加為構建步驟，以便它在 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. 刪除Layout.cshtml中對MyProject.styles.css的引用，並將其替換為新的 webpack 包razor.css 。

5. 將*.cshtml.css添加到.gitignore

由於需要 (1) 中的解決方法，這並不理想。 但是，它完美地工作。

如果我找到更好的方法，我會更新這個。 如果您有更好的答案，請添加。