MVC中用 BundleCollection 压缩CSS时图片路径问题
MVC中有个专门提供JS和CSS压缩的类,BundleCollection,其实这个类也可以在asp.net中用,
关于BundleCollection类的详细推荐个地址:http://www.cnblogs.com/lifeil/archive/2013/03/11/2954071.html
我这里只是记录下使用过程中遇到的两个小问题
1.css被压缩后,里面图片路径文件的问题
我们可以看到MVC中 BundleConfig这个类里,都是自动生成的好多需要压缩的JS和CSS
bundles.Add(new StyleBundle("~/Content/Css").Include("~/Content/layout.css", "~/Content/wysiwyg.css"));
view在头部这样写就可以导入 ~/Content/layout.css 和~/Content/wysiwyg.css的CSS了
@Styles.Render("~/Content/Css")
照上面方法,我继续在后面加了个CSS,就是站点的皮肤,注意蓝色位置,已经不在Content文件下级了
bundles.Add(new StyleBundle("~/Content/Css").Include("~/Content/layout.css","~/Content/wysiwyg.css", "~/Content/themes/blue/styles.css"));
这样在开发的时候没什么问题,因为在开发模式下CSS和JS是没有被压缩的,但是我把网站发布后就出问题了,
Content/themes/blue/styles.css 里图片都是这样写的 background: url(img/bg_navigation.png),有人会说,为什么不写 /Content/themes/blue/img/bg_navigation.png,如果在MVC用到了区域,这样写路径也会就会出问题
如何在不发布网站的情况下测试压缩CSS呢?在BundleConfig 类里加上
BundleTable.EnableOptimizations = true;
或修改Web.config
<compilation debug="false" targetFramework="4.0">
看看压缩前后的CSS路径终于发现问题了
压缩前:
压缩后:
原来,我们写的 new StyleBundle("~/Content/Css") 会影响到压缩后的路径
解决办法:
对于皮肤的CSS,我们重写一个声明
bundles.Add(new StyleBundle("~/Content/themes/blue/Css").Include("~/Content/themes/blue/styles.css"));
这样图片就能找到了
2.压缩javascript文件的是时候,如果文件名带有 .min居然不压缩,连文件都不导入,例如
bundles.Add(new ScriptBundle("~/bundles/easyui").Include("~/Scripts/my/jquery.easyui.min.js"));
这样的文件在压缩后不会被导入,解决办法
改JS名字,去掉min 或 在view里写 @Scripts.Render("~/Scripts/my/jquery.easyui.min.js"),这样就不会被压缩了
其实带min已经是被压缩了的,如果对这个文件进行压缩,运行里面相关方法会报错
写的有点乱,只是记录下
MVC中用 BundleCollection 压缩CSS时图片路径问题的更多相关文章
- webpack4 前端框架基础配置实例-解决css分离图片路径问题
1.安装nodejs 2. 需要全局和项目安装webpack和webpack-dev-server npm install webpack webpack-dev-server -g npm inst ...
- css 背景图片路径问题
背景图片路径找寻失败问题 1.加~ background-image: url("~@/assets/login/login-bg.png"); background-size: ...
- css之图片路径
关于背景图片url路径:图片和调用文件在两个不同根下的(不在同一个包(文件夹)中),要用相对路径,举例"../images/cq.gif":图片和调用文件是在一个根下的直接孩子,用 ...
- vue.js 独立引用css文件图片路径错误
vue的环境是用vue-cli,写在vue文件的图片引用build之后的路径都没什么问题 但是有的时候我们会有一些公共的css文件单独的放在assets目录下 如下图所示 这里当build后发现写在c ...
- URLRewrite出现的CSS及图片路径问题
原文发布时间为:2011-02-24 -- 来源于本人的百度文章 [由搬家工具导入] 例如:把http://www.sofunz.com/house/18649重写到http://www.sofunz ...
- 透过现象看webpack处理css文件中图片路径转换的具体过程
webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也 ...
- vue webpack 打包后css背景图路径问题
最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...
- Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结
上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...
- Spring MVC程序中怎么得到静态资源文件css,js,图片文件的路径问题
问题描述 在用springmvc开发应用程序的时候.对于像我一样的初学者,而且还是自学的人,有一个很头疼的问题.那就是数据都已经查出来了,但是页面的样式仍然十分简陋,加载不了css.js,图片等资源文 ...
随机推荐
- VMware安装Centos6.8设置ip无法远程连接问题
今天使用VMware安装Centos6.8minimal版本再设置ip地址的时候遇到了一些麻烦,就是无法ping通Centos操作系统的配置的ip从而无法用Xshell远程连接上. 如何配置请看下面的 ...
- 云信推送通知 APN invalid Token
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #e4af09; min-height: 14.0px } ...
- IAsyncResult 接口异步 和匿名委托
IAsyncResult 接口异步 DataSet ds = new DataSet(); Mydelegate del = new Mydelegate(LoadData); IAsyncResul ...
- javascript history对象
window.history.[属性|方法] 0.history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能. 1.属性 2.方法
- Linux常用操作
1. Latex参考文献格式 http://blog.163.com/sunkun_hust/blog/static/204454119201482524222283/
- jquery实现图片漂浮效果
$(window).load(function(){ function moveRocket(){ $("#float").animate({'left':'+=100'} ...
- ASP_Login
===第一种============================================================================================== ...
- vs2015下载及预览与发布
VS2015 RC发布下载,通用Windows平台必备神器! 几个月前微软发布了Visual Studio 2015的技术预览版本,之后又先后发布了6个更新版本.如今,微软已在其官方页面中公布了最新开 ...
- 浅谈position: absolute和position:relative
一.在此先说一下文档流的概念: 1,文档流定义: 百度百科定义:文档流是文档中可显示对象在排列时所占用的位置. 大多网友的理解:元素的位置由元素在 (X)HTML 中的位置决定.将窗体自上而下分成一行 ...
- 第14天dbutils与案例
第14天dbutils与案例 第14天dbutils与案例 1 1. 1.dbutils介绍 2 2. 2.dbutils快速入门 2 3. 3.dbutils A ...