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时图片路径问题的更多相关文章

  1. webpack4 前端框架基础配置实例-解决css分离图片路径问题

    1.安装nodejs 2. 需要全局和项目安装webpack和webpack-dev-server npm install webpack webpack-dev-server -g npm inst ...

  2. css 背景图片路径问题

    背景图片路径找寻失败问题 1.加~ background-image: url("~@/assets/login/login-bg.png"); background-size: ...

  3. css之图片路径

    关于背景图片url路径:图片和调用文件在两个不同根下的(不在同一个包(文件夹)中),要用相对路径,举例"../images/cq.gif":图片和调用文件是在一个根下的直接孩子,用 ...

  4. vue.js 独立引用css文件图片路径错误

    vue的环境是用vue-cli,写在vue文件的图片引用build之后的路径都没什么问题 但是有的时候我们会有一些公共的css文件单独的放在assets目录下 如下图所示 这里当build后发现写在c ...

  5. URLRewrite出现的CSS及图片路径问题

    原文发布时间为:2011-02-24 -- 来源于本人的百度文章 [由搬家工具导入] 例如:把http://www.sofunz.com/house/18649重写到http://www.sofunz ...

  6. 透过现象看webpack处理css文件中图片路径转换的具体过程

    webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也 ...

  7. vue webpack 打包后css背景图路径问题

    最近在写vue-webpack项目时,打包后遇到了css背景图片路径报错的问题 奇怪的是,通过img标签引入的图片路径却没有问题,看来是webpack在打包后,读取css中图片的相对路径出错了. 稍微 ...

  8. Spring MVC程序中得到静态资源文件css,js,图片文件的路径问题总结

    上一篇 | 下一篇 Spring MVC程序中得到静态资源文件css,js,图片 文件的路径 问题总结 作者:轻舞肥羊 日期:2012-11-26 http://www.blogjava.net/fi ...

  9. Spring MVC程序中怎么得到静态资源文件css,js,图片文件的路径问题

    问题描述 在用springmvc开发应用程序的时候.对于像我一样的初学者,而且还是自学的人,有一个很头疼的问题.那就是数据都已经查出来了,但是页面的样式仍然十分简陋,加载不了css.js,图片等资源文 ...

随机推荐

  1. VMware安装Centos6.8设置ip无法远程连接问题

    今天使用VMware安装Centos6.8minimal版本再设置ip地址的时候遇到了一些麻烦,就是无法ping通Centos操作系统的配置的ip从而无法用Xshell远程连接上. 如何配置请看下面的 ...

  2. 云信推送通知 APN invalid Token

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px Helvetica; color: #e4af09; min-height: 14.0px } ...

  3. IAsyncResult 接口异步 和匿名委托

    IAsyncResult 接口异步 DataSet ds = new DataSet(); Mydelegate del = new Mydelegate(LoadData); IAsyncResul ...

  4. javascript history对象

    window.history.[属性|方法] 0.history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能. 1.属性 2.方法

  5. Linux常用操作

    1. Latex参考文献格式 http://blog.163.com/sunkun_hust/blog/static/204454119201482524222283/

  6. jquery实现图片漂浮效果

    $(window).load(function(){   function moveRocket(){   $("#float").animate({'left':'+=100'} ...

  7. ASP_Login

    ===第一种============================================================================================== ...

  8. vs2015下载及预览与发布

    VS2015 RC发布下载,通用Windows平台必备神器! 几个月前微软发布了Visual Studio 2015的技术预览版本,之后又先后发布了6个更新版本.如今,微软已在其官方页面中公布了最新开 ...

  9. 浅谈position: absolute和position:relative

    一.在此先说一下文档流的概念: 1,文档流定义: 百度百科定义:文档流是文档中可显示对象在排列时所占用的位置. 大多网友的理解:元素的位置由元素在 (X)HTML 中的位置决定.将窗体自上而下分成一行 ...

  10. 第14天dbutils与案例

    第14天dbutils与案例 第14天dbutils与案例    1 1.    1.dbutils介绍    2 2.    2.dbutils快速入门    2 3.    3.dbutils A ...