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已经是被压缩了的，如果对这个文件进行压缩，运行里面相关方法会报错

写的有点乱，只是记录下

转载于:https://www.cnblogs.com/linfei721/archive/2013/05/03/3056497.html

MVC中用 BundleCollection 压缩CSS时图片路径问题相关推荐

django中html中图片路径怎么写,django css样式,图片路径问题解决方案
在用Django 做项目时,如果在本地调试的情况下,我们会开启 settings.py 中的 DEBUG = True 同时我们还会做如下操作: 1. 设置 STATIC_ROOT = os.path ...
在html中css的图片路径,html - 如何在css使用绝对路径的图片做背景
html - 如何在css使用绝对路径的图片做背景怪我咯2017-06-17 09:15:48 0 2 389 在做一个项目,里面有很多图片要展示,处于后期维护方便的考虑,准备做成把图片上传 ...
vue-cli css文件图片路径写法
html图片分开,webpack单独分离打包css，css里引用的图片路径错误，怎么解决？
现在我的这个项目是将css和js单独打包出来,打包后的目录结构和打包前一致. 打包前: 从这张图可以看到,如果是css文件夹根目录下的css文件引用images文件夹下的图片应该使用../就可以了,如 ...
vue-cli3打包时图片压缩处理
当我们在 JavaScript.CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时,该资源将会被包含进入 webpack 的依赖图中. 在其编译过程中,所有诸如 &l ...
js和css和img,Node.js压缩web项目中的js,css和图片
安装node.js 这个非常简单,下载下来,配置下环境变量就可以了,使用node -v查看是否安装成功安装压缩需要的模块分别是uglify-js,clean-css,node-smushit 命令是 ...
css中background-image背景图片路径设置
web项目中经常会用到background-image:url(),很多小伙伴不知道该怎么写需要的图片路径. 在此之前先要知道几个重要的东东: / 项目根目录这个不用多说,就是程序 ...
【报错笔记】关于图片上传时的路径问题
在图片上传时将图片上传到本地磁盘后如下将图片保存到了D盘下因此在jsp页面中读取对应图片时,需要在tomcat中配置相关信息. 在jsp页面中图片路径src中使用虚拟路径加数据库中图片名称就可以将 ...
WKWebview加载本地图片时出现路径问题
出现问题情况是:将uiwebview换成wkwebview之后,之前将webview上那些图片放回本地下载后缓存的图片没办法在webview上找到,最后排查出原因是,wkwebview需要将图片和网页 ...

MVC中用 BundleCollection 压缩CSS时图片路径问题

MVC中用 BundleCollection 压缩CSS时图片路径问题相关推荐

最新文章

热门文章