Quantcast

CSS seems to be lose the "cascading" functionality

classic Classic list List threaded Threaded
1 message Options
Reply | Threaded
Open this post in threaded view
|  
Report Content as Inappropriate

CSS seems to be lose the "cascading" functionality

arnaldop
I'm using Thymeleaf. My head fragment is:
<head th:fragment="headTag">

	<meta charset="utf-8" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<title th:text="#{app.title}">Welcome</title>

	<link href="css/spyclub.css" th:href="@{/css/spyclub.css}" rel="stylesheet" />

	<script th:src="@{/webjars/jquery/2.1.1/jquery.min.js}"></script>

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

</head>

However, my head tag renders like this:
	<head>

	<meta charset="utf-8" />
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1" />

	<title>K.S.O.</title>

	<link href="/css/spyclub.css" rel="stylesheet" />

	<script src="/webjars/jquery/2.1.1/jquery.min.js"></script>

	<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
	<!--[if lt IE 9]>
	  <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
	  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
	<![endif]-->

<link rel="stylesheet" href="/dandelion-assets/b05f3a49f337725270813694681e82d9/f4748e573c75fd6119ef88c02d0f0f26/css/bootstrap-3.2.0.css"></link>
<link rel="stylesheet" href="/dandelion-assets/b05f3a49f337725270813694681e82d9/99a030d9c69c291271a7bbca5fcebe9f/css/bootstrap-theme-3.2.0.css"></link>
</head>

The issue here is that I cannot override any bundled CSS code in my application's CSS because the bundles are listed last, thereby overriding my CSS.

The only alternative I can think of is to create my own application bundle, but this seems to be overkill. I can see bundles for external functionality, but I don't see creating a bundle for my applications own CSS and JS. If that is the only solution, it seems that Dandelion is removing basic HTML functionality, which doesn't make sense.

What can I do?

Thanks in advance!
Loading...