Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

bootstrap is missing when running gulp build, but works fine in gulp babel #223

Open
wungjaelee opened this issue Mar 13, 2020 · 1 comment
Open

bootstrap is missing when running gulp build, but works fine in gulp babel #223

wungjaelee opened this issue Mar 13, 2020 · 1 comment

Comments

@wungjaelee
Copy link

wungjaelee commented Mar 13, 2020 •
edited

I have a strange issue where I'm including bootstrap cdn in my popup.html and the cdn is included when I'm using "gulp babel" but when I do "gulp build" the cdn no longer shows.

This is what my html head looks like with gulp babel.

<head>
  ...
  <link href="styles/main.css" rel="stylesheet">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  <link href="https://fonts.googleapis.com/css?family=Roboto&amp;display=swap" rel="stylesheet">
  ...
</head>

This is what my html head looks like with gulp build.

<head>
  ...
  <link rel="stylesheet" href="styles/main.css">
  ...
</head>

How can I fix this?
@hqtoan94
Copy link
Contributor

You could update from this:

<!-- build:css styles/main.css -->
    <link href="styles/main.css" rel="stylesheet">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Roboto&amp;display=swap" rel="stylesheet">
<!-- endbuild -->

to this:

<!-- build:css styles/main.css -->
    <link href="styles/main.css" rel="stylesheet">
<!-- endbuild -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Roboto&amp;display=swap" rel="stylesheet">

The reason is that when you put all stylesheet inside <!-- build:css styles/main.css -->...<!-- endbuild -->, gulp builder will wrap all the stylesheet and combine into 1 file only: styles/main.css. But it can only combine local stylesheets only, stylesheet from CDN will be ignored when you put inside this comment block. So the solution is quite simple. Just move the CDN stylesheets outside of the building block then.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@hqtoan94 @wungjaelee