3 years ago

Bundling bower package css files with relative urls inside them

Posted 3 years ago by keevitaja

Hello! I am trying to figure figure out, how to bundle css from bower vendor packages. Currently i am loading different css files:

<link rel="stylesheet" href="{{ asset('bower/AdminLTE/bootstrap/css/bootstrap.min.css') }}">
<link rel="stylesheet" href="{{ asset('bower/font-awesome/css/font-awesome.min.css') }}">
<link rel="stylesheet" href="{{ asset('bower/Ionicons/css/ionicons.min.css') }}">
<link rel="stylesheet" href="{{ asset('bower/AdminLTE/dist/css/AdminLTE.min.css') }}">
<link rel="stylesheet" href="{{ asset('bower/AdminLTE/dist/css/skins/skin-blue.min.css') }}">

And some of these files have relative urls pointing to assets inside them. For the example in AdminLTE we find:

.layout-boxed {
  background: url('../img/boxed-bg.jpg') repeat fixed;

So if i use elixir and bundle all these files to bundle.css or something, all these pointers to different assets would be broken.

Is there a way to solve this issue?

Please sign in or create an account to participate in this conversation.