Embed stylesheet into a webpack javacript. (w/o any plugins)

[romeobleonor]

Embed stylesheet into main.js (bundle) using css-loader and style-loader.

• css-loader - resolved any css rules @import and url(...) which interpreted like require()
• url and file-loader - are loaders for requiring assets
• style-loader - add all the css rules in style tag of the html

@igMarketingLeonor

[igMarketingLeonor]

Good idea! try that first and later come up with a better approach like extracting the css file, so your style is no longer inline into the javascript. It tells webpack to load css file into a separate file. Also, we have to resolve assets in our css like fonts and images. Embed small png as data urls, jpeg images as file and use sass instead of css.

In this example, your main js will have a require to the css file right?

// main.js
require('./css/main.css');
document.write("text is added to the DOM and render the style by webpack");

[romeobleonor]

Yes! You are right! I've tweaked your code a little bit and practice my DOM skills. :)

Here's the structure of our files.

Here's what I got.

require('../css/main.css');

// native document ready
document.body.onload = addElement;

function addElement() {
  var newElem, newElemContent, mainCont;

  newElem = document.createElement('h2');
  newElemContent = document.createTextNode('Investors Group');
  newElem.appendChild(newElemContent);

  mainCont = document.getElementsByClassName('wrapper')[0];
  mainCont.appendChild(newElem);
}