我的 ASP.NET Core RazorPages 專案使用 Webpack。我也想使用 CSS Isolation。
每個 RazorPageFoo.cshtml都有一個關聯的 css 檔案Foo.cshtml.css。它們由運行時進行 css 隔離和捆綁，并放置在obj/. 運行時似乎為最終的包提供服務wwwroot/ProjectName.styles.css（但它實際上并不存在，它是一個“實作細節”）。
錯誤的選項 1：使用 Webpack。我可以將它們重命名Foo.cshtml.scss為 Webpack 并使其可用。但我懷疑是否有可能（？）編譯它們（就地和非捆綁），以便運行時可以找到它們。
錯誤的選項 2：使用運行時。我可以完全從 Webpack 中排除這些，并允許運行時管理它們。但是我不能使用 scss 或縮小。
如何同時使用 CSS 隔離功能和 Webpack？
uj5u.com熱心網友回復：
我找到了一個方法：
css 隔離檔案必須是 css - 它不能是 scss。因此，安裝一個 IDE 擴展，在保存時編譯 scss->css，或者，將其添加為構建步驟，以便它在 CI 中可用。將其配置為就地編譯
SomePage.cshtml.scss為SomePage.cshtml.css.通過添加到 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
}
洗掉對
MyProject.styles.cssin 的參考Layout.cshtml，并將其替換為新的 webpack bundlerazor.css。添加
*.cshtml.css到.gitignore
由于需要 (1) 中的解決方法，這是不完美的。但是，它完美地作業。
如果我找到更好的方法，我會更新這個。如果您有更好的答案，請添加。
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/471000.html
標籤：C＃ asp.net 核心 网页包 asp.net-core-6.0 asp.net-core-razor-pages