Exported External CSS Been Modified

Bug Reports
1

Hi there,

I’ve been trying to use animate.css in new released Bootstrap Studio 2.1.1 and it seems the minified version of animate.css has been beautify and it causing animate.css unable to work as expected.

My suggestion is to not modify(beutify/minify) the external resources(CSS/JS) when exporting to HTML / preview it.

Thanks.

2

Thank you for reporting this! I think that there is some other issue - we only place a link to the URL in your page, we don’t download it locally. Maybe you have activated your Dev Tools’ beautify option? Just tested animate.css and it works here.

3

Importing a css-file is different than linking!!

As I import the animate.css - nothing happens
as I linked the animate.css - my test header starts jumping, even in the editor :slight_smile:

I compared both css-file and found, that the following part are gone by import

all parts with @ like this one

@-webkit-keyframes bounce {
  from, 20%, 53%, 80%, to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0);
    transform: translate3d(0,0,0);
  }

As I don’t want to change animate.css than using it… I link it.

4

Just as @frank said, by linking it, no problem at all. But when using import css, nothing happened.

For time being, using CDN solved the issue, but only for temporary.

I would like to see the import css work the same as the linked css.

5

Thanks, now I understand. Like Frank said, things break at the keyframe animations. We will add support for keyframes in the CSS editor eventually, but I think a better solution would be to add SASS support in the next releases. By creating a scss file you will be able to paste any CSS/SASS code inside it and edit it within the same code editor that we now use for JavaScript.

6

SASS Support... I just wanted to ask for it, the next few days...

You were faster.

I can't wait :)