Loading custom css overwrite scss

1

Hi,

I am new to scss. I am using bootstrapUI. My custom.css is being overwritten by _tables.scss

Is there a way to have my custom.css right on top ?

$this->Html->css( [ 'BootstrapUI.bootstrap.min', 'custom' ] , ['block' => true]);
echo $this->fetch('css');

scss 1
scss 1166×564 6.24 KB

2

Can you provide a better image of how the code behaves?

I’d like to see

  • Rendered HTML of what echo $this->fetch('css'); generates.
  • Expanded view of the developer tool containing the CSS properties you apply and the properties bootstrapUI applies, and how it is overwritten.
3

You need to have a higher specificity to appear first (or inline in style attribute)

Check this article in css-tricks

2 Likes
4

@raul338 my code specifies custom.css at the end, so in normal case, custom.css will overwrite the previous values.

@Mentis here is the output of debug( $this->fetch('css') );

<link rel="stylesheet" href="/bootstrap_u_i/css/bootstrap.min.css"/><link rel="stylesheet" href="/css/custom.css"/>

cake scss 1
cake scss 11035×1655 99.7 KB

5

Looks to me like your styles.css is overwriting the _tables.css.

The verticle-align property is using the value from your styles.css stylesheet.

bilde

I’m sorry if I’m misunderstanding your problem.

6

Except that’s not exactly how CSS works, thats why i’ve pointed those articles.

You are overriding now with !important, if you don’t want to use !important you have to use like this:

.table td {
   vertical-align: middle;
}

that way it will stay first, also applying other styles too ( like padding) without setting !important to all of them.

7

@Mentis @raul338 My question is not the css contents, but why the files are not loaded in sequence, not so much of the contents and !important

I expect it to load in sequence like this, so custom.css will be right on top. but looks to me is like _tables.scss is right on top and thus overwritting any other css that I call.

  1. Load bootstrap.min
  2. Load custom.css
8

It is loading it in that order. I’m on my mobile, so can’t confirm, but I’d venture a guess that Chrome developer tools is sorting the stylesheets alphabetically when displaying them in the tool.

As you can see by your earlier post, CakePHP does load the stylesheet for bootstrap first, then your custom stylesheet.

9

The files are loaded in sequence.

But the styles tab from chrome developer tool, does not show files in order.

It shows the css rules in order of specificity (check my first response), that applies to the element you have selected (in this case a table cell).

The name _table.scss shows because the bootstrap.min.css has a sourcemap embebed, it showing that the rule comes from the _tables.scss in bootstrap source code.
You can disable CSS sourcemaps in the settings of the developer tools

10

thanks. I thought the files shown in the developer tools were showing & loading in order.