5

I have code like this

<html>
    <head>
        <link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="path_to_css/some_css.css" rel="stylesheet" type="text/css">
    </head>
    <body>
        ...
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="jquery/jquery.min.js"></script>
    </body>
</html>

and I need plugin/loader or other way to get my html file with replaced link and script tags to content of this files, is there any way to do it?

Finnaly i wrote own plugin which fit my needs include-file-webpack-plugin

Adi Prasetyo
  • 1,006
  • 1
  • 15
  • 41
jagwe danfesa
  • 503
  • 1
  • 5
  • 11

1 Answers1

5

It actually can be accomplish with:

  1. npm i --save-dev css-loader to-string-loader

  2. configure your webpack with 

    module: [
    rules: [
      {
        test: /\.css$/,
        use: ['to-string-loader', 'css-loader']
      }
    ]
  }

  3. Then in your project you can access the css as string like so

    const cssContent= require('path_to_css/some_css.css'); console.log('your css is: ', cssContent.toString());

    • Or maybe you want inject it manually to the page with:

      const boostrap= require('bootstrap/dist/css/bootstrap.min.css');
let style= document.createElement('style');
style.id= 'boostrap';
style.setAttribute('type', 'text/css');
style.innerHTML= boostrap.toString();
document.body.appendChild(style);

Reference

  1. Inject CSS stylesheet
  2. css-loader
Adi Prasetyo
  • 1,006
  • 1
  • 15
  • 41
  • how would you run that function from Webpack / runtime? I'm compiling ejs templates into a 1 one file webpage so cant run JS from the page. – v3nt Oct 06 '20 at 12:57