Question

0

159

Views

How do I inject css imported in a javascript module into the html header using Gulp?

I've inherited a bit of a legacy system that uses Gulp, and am trying to bring in typescript, esmodules, and better dependency management. I'm running into a hurdle with javascript libraries that require css. In modern webpack based frameworks, I believe they implement css imports in js by injecting any imported css into the header in a large style tag. I'm trying to do a similar thing with Gulp.

I'd like to be able to convert this:

// src/index.html
<html>
  <head>
  </head>
  <body>
    <input type="text" />
    <!-- in src test.bundle.js is actually test.bundle.ts, but gets converted to js by gulp -->
    <script src="js/test.bundle.js"></script>
  </body>
</html>

To this:

//dist/index.html
<html>
  <head>
    <!-- This style auto-generated by gulp -->
    <style>... anything imported from js modules</style>
  </head>
  <body>
    <input type="text" />
    <script src="js/test.bundle.js"></script>
  </body>
</html>

// src/test.bundle.ts
import $ from 'jquery';
import 'jquery-typeahead';

//importing a css/scss file would inject it into the head in a style tag for any html page that brings in this script with <script src="js/test.bundle.js"></script>
import 'node_modules/jquery-typeahead/dist/jquery.typeahead.min.css';
...

If I should rethink my strategy, I'm open to that too. The current system is not a single page app with an entry point, so every html page is loaded in isolation, and gulp needs to treat each page as standalone.

Here's a POC that has the ts transpiling working for each independent page, but not a working solution for css importing: https://codesandbox.io/s/intelligent-dubinsky-oyc41?file=/src/test.bundle.ts

about 4 years ago · Juan Pablo Isaza

Answer question

0

159

How do I inject css imported in a javascript module into the html header using Gulp?

Find remote jobs

Andres GPT