3

I am writing a React app with create-react-app which uses Webpack and the extract-text-plugin to generate bundled js and css files. Now I would like to know the filename of the generated CSS file in my JS file, like so:

import React, { Component } from 'react';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        {fileNameOfMyGeneratedCssFileHere}
      </div>
    );
  }
}

export default App;

Is that even possible, maybe with a custom loader or Webpack plugin?

edit To clarify: create-react-app is not the problem here, I can eject it or create a custom configuration. My problem is how to know the CSS file name(s) from inside a JS script.

Lukas
  • 9,752
  • 15
  • 76
  • 120
  • When I remember correct you can not modify the `create-react-app` webpack, until you eject it. So when you run `npm build`you automatically get a bundled version. Therefore, I do not understand your plans. Can you explain a bit more? – Jan Franta Aug 12 '17 at 20:07
  • Ejecting it or creating a custom configuration like so https://auth0.com/blog/how-to-configure-create-react-app/ is not the problem. The problem I have is how to know the file name inside my JS script. – Lukas Aug 12 '17 at 20:09
  • I edited the question – Lukas Aug 12 '17 at 20:10
  • extract-text-plugin moves css-es to separate file, which you should import via `````` in your index.html, where style.css is the value specified in plugins options like: ```plugins: [ new ExtractTextPlugin("style.css"), ]``` – styopdev Aug 12 '17 at 20:38
  • extract-web-plugin also inserts a hash for long term caching so I cannot know the filename as it is based on the css contents. – Lukas Aug 12 '17 at 20:40
  • You should post your webpack config and file structure if you would like a more constructive answer – thomasmeadows Aug 13 '17 at 14:11

0 Answers0