0

I am trying to apply a css stylesheet to my html page, as well as to obtain it as a string in javascript code (I want to show my stylesheets to users). I'm using css-loader and style-loader. Here's a snippet from webpack configuration file:

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

When I use this config the styles are applied to my HTML page, but I can't obtain them as string in the code. The console.log(style.toString()) gives me an empty object [object Object]. It's empty, because Object.keys(style) gives me [ ]. Here's app.js file:

const style = require('./style.css')

const test = () => {
  console.log(style.toString())
}

test()

If I comment out { loader: 'style-loader'}, console prints my stylesheet, but the styles are not applied to the HTML page. Here's console.log(style.toString()) output in this case: 

* {
  margin: 0;
  padding: 0;
  border: 0;
}
...

Any advice?

manidos
  • 3,244
  • 4
  • 29
  • 65
  • The output of the [toString function on an object](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/toString) is correct. If you want that to work you will have to override the toString function. – fjoe Dec 30 '17 at 10:19
  • @fjoe, yeah, but it's an empty object in my case, because `Object.keys(style)` gives me `[ ]` – manidos Dec 30 '17 at 10:21
  • @fjoe, `toString()` method gives me the expected result if I comment out `{ loader: 'style-loader'}`. – manidos Dec 30 '17 at 10:26
  • Take a look @ [this](https://stackoverflow.com/questions/34039826/webpack-style-loader-vs-css-loader) seems you might be missing a few things. – fjoe Dec 30 '17 at 10:35

0 Answers0