search

yeoman / generator-chrome-extension

Scaffold out a Chrome extension
http://yeoman.io
MIT License
2.61k stars 226 forks source link

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

Open wungjaelee opened 4 years ago

wungjaelee commented 4 years ago

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 commented 4 years ago

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.