Tôi không chắc liệu đó có phải là tối ưu hóa web hay WebGrease rất cầu kỳ nhưng một (hoặc cả hai) trong số đó là và bạn cần phải hết sức cẩn thận.
Trước hết không có gì là sai với mã của bạn:
bundles.Add(new StyleBundle("~/content/css").Include(
"~/content/css/reset.css",
"~/content/css/bla.css"));
Trong thực tế đây là chính xác những gì Microsoft làm. Lý do chính họ không sử dụng ~/bundles cho css là đường dẫn tương đối bị làm hỏng hình ảnh. Hãy suy nghĩ về cách trình duyệt của bạn nhìn thấy một gói - chính xác giống như cách nó thấy bất kỳ URL nào khác và tất cả các quy tắc liên quan đến đường dẫn thông thường vẫn áp dụng đối với các đường dẫn tương đối. Hãy tưởng tượng css của bạn có đường dẫn hình ảnh đến ../images/bullet.png. Nếu bạn đang sử dụng ~/bundles trình duyệt sẽ tìm trong một thư mục ở trên bundles không thực sự tồn tại. Nó có thể sẽ kết thúc tìm kiếm trong ~/images nơi bạn có thể có nó trong ~/content/images.
Tôi đã tìm thấy một vài điều mà thực sự có thể phá vỡ nó và gây ra 404 lỗi:
- FYI: cấu trúc thư mục của tôi là
Content/CSS trong đó có một thư mục images cho hình ảnh CSS.
- Tôi có
EnableOptimizations=true để buộc sử dụng các bó trong khi thử nghiệm
- Điều đầu tiên bạn nên làm là 'View Source' và chỉ cần nhấp vào các liên kết css để xem họ làm việc
Hãy nói rằng chúng tôi đang phát triển một trang web về mèo. Bạn có thể có điều này
@Styles.Render("~/Content/css/cats.css") // dont do this - see below why
bundles.Add(new StyleBundle("~/content/css/cats.css").Include(
"~/content/css/reset.css",
"~/content/css/bla.css"));
này tạo ra một liên kết CSS để con đường này trong HTML của bạn:
/Content/css/cats.css?v=JMoJspikowDah2auGQBfQAWj1OShXxqAlXxhv_ZFVfQ1
Tuy nhiên điều này sẽ cung cấp cho 404 vì tôi đặt một .css mở rộng và IIS (tôi nghĩ) được bối rối.
Nếu tôi thay đổi nó để này sau đó nó hoạt động tốt:
@Styles.Render("~/Content/css/cats")
bundles.Add(new StyleBundle("~/content/css/cats").Include(
"~/content/css/reset.css",
"~/content/css/bla.css"));
Một vấn đề khác đã chỉ ra bởi những người khác là bạn không phải làm
@Styles.Render("~/Content/css")
nếu bạn có một thư mục css hoặc tập tin (có khả năng bạn không có tệp có tên là css không có tiện ích mở rộng) trong thư mục Content của bạn.
Một mẹo nữa là bạn cần phải chắc chắn HTML được tạo của bạn có một số phiên bản
<link href="/Content/css/cats?v=6GDW6wAXIN5DJCxVtIkkxLGpojoP-tBQiKgBTQMSlWw1" rel="stylesheet"/>
Nếu không và trông như thế này, thì có thể bạn không có một kết hợp chính xác cho tên gói giữa bảng Bundle và trong tệp cshtml của bạn.
<link href="/Content/css/cats" rel="stylesheet"/>
Điều gì xảy ra nếu bạn tạo các tệp ~ content/css/reset.min.css và bla.min.css mà EnableOptimizations = true có xu hướng tìm kiếm? – Phil
@Phil vẫn 404. – sed
Tôi vừa tạo dự án trống và thử với hai tệp 'css' và cùng một điều đã xảy ra. Có lẽ đó là vì tôi đặt các tệp css của tôi trong thư mục '/ content/css /' chứ không phải chỉ là '/ content /' tuy nhiên tôi nghi ngờ ... – sed