My team has built a React.js component we use at our company internally. The component is currently being built with a tool called nwb.
I have used cookiecutter to clone and de-template-ize the Git repo here. So far so good!
Based on what I see, the boilerplate project is set up to run webpack in order to produce a single output file called {{project_shortname}}.min.js (for production mode). I also see that there is a dash-generate-components python program that needs to be installed as part of the project setup, which from what I can tell here, runs react-docgen in order to facilitate some sort of React-flavored-Javascript-to-AST-to-python-black-magic transpilation process. Pretty neat!
However, what I don’t understand is that the project is set up to run dash-generate-components against the source code being built in the npm target build:js… if so, what’s the point of having all of the webpack build process at all? I have confirmed that just running the build:py target against my original React component source code produces a Dash component I can use in usage.py without first running webpack, once I modify usage.py to correctly instantiate the component. My source code is ES6 Javascript. What I don’t get (actually there is a lot I don’t get 
) , is: how is any of the css+less styling in the original component supposed to make its way into the Dash / Python world?. It appears that the __input__.py here has been modified a few months ago to remove local .css dependencies (maybe because those styles are expected to be bundled inside the foo.min.js webpack build artifact?). So all things seem to be pointing toward passing my webpack output to dash-generate-components …
I assumed that I just needed to change the build:py npm target to have dash-generate-components point to my new, minified webpack output … except the process complains:Error: No suitable component definition found. It appears this error comes from react-docgen, and that that tool is expecting some input format that is not whatever is coming out of webpack.
So … that’s a lot of words. But my questions is really this: how do I get my less + css styles into my Dash custom component? I can build my component using a modified version of the boilerplate Webpack, but I can’t pass the result to the dash component generator. I can pass my source code to the dash component generator; but I can’t figure out what to do with the less / css the original component uses in order to make the Dash component realize it’s there. Sorry, but I am struggling a little bit with the conceptual model that’s supposed to be in-play here. It’s a LOT of mechanism, which seems to be under active development.