Webpack config for importing external CSS/Images/Fonts

[jeffscottward]

Currently when building my own style-guide, generated as described in the readme, I am unable to import assets other than javascript.

_
I would like to be able to import css
-- Locally sourced CSS (regular)
-- Locally sourced CSS file for generated font-face stacks (url sourcing issue?)
-- CSS files that are required by NPM-installed React components (rc-slider for example)
-- Stylesheets resets that are installed via NPM (like sanitize.css) --^ same issue I believe

I would like to be able to import images
-- to source as src of an img tag
-- to use as a background-image for inline CSS (styled-jsx / styled-components)

I would like to be able to import font faces(?)
-- to be referenced by a CSS stylesheet I have generated from a font-face generator(!)
-- to be required inside of the CSS file in the url param(??? - maybe not)
-- [OTHER USE?]

[stonebk]

Dealing with other asset types is not something I have tried to tackle yet, but definitely on my list of things to think about. It's important to ask, what does it mean to import a css file or an image when it comes to a component library? Does it mean using style-loader to inject a <style> tag into the DOM? Or does it mean to build the css into a stylesheet that is published alongside the javascript module. Same goes with images -- how do you deliver that asset to the end user. An SVG can be inlined, but what do you do with a png?

Personally, I think assets and dependencies should be bundled as much as possible into just a single component when it comes to component libraries. That means using a CSS in JS implementation like styled-components or emotion for your styles. That means using SVGs that can be inlined into the component. This way, your consumers don't have to worry about loading other assets, they just use your component and everything works. This is the approach we're taking right now, and as such is why I haven't looked to much into loading other asset types yet.

[jeffscottward]

Right. Yea, I was was thinking if not SVG that can be inlined in markup, then base64. Just I would have to go do that. Could probably base64 an image into in a string template in a .js file and import that way. End result is the same just they aren't actually the "proper" file type.

tldr;
using string templates as an escape hatch.

[stonebk]

Perhaps that is what the tool can eventually do for you, but I haven't thought about it to that extent yet.

[jeffscottward]

Been working on it already today.
It will have to assume a certain directory structure at first. Here is a very ugly WIP.
https://github.com/jeffscottward/asset-inliner/blob/master/index.js

I'm using nodemon to keep restarting the server but the console.logs are too large.
Have you used node-inspector? (with nodemon?)

[stonebk]

Have you tried something like this? https://www.npmjs.com/package/babel-plugin-transform-assets

Styleguidist should hot reload changes to components (maybe not to config). For debugging, I just use the --inspect-brk flag for node -- I have not used it with nodemon. https://nodejs.org/en/docs/guides/debugging-getting-started/

[jeffscottward]

Oh my. haha!
I already built a thing that helps with asset-inlining.
https://github.com/jeffscottward/asset-inliner/blob/master/src/index.js
Will give this a go on the second loop around

UPDATE:
Never mind: some key words here
"This plugin removes the need to run your server code through Webpack module bundler when using loaders such as file-loader, url-loader and building isomorphic universal apps"

This does not remove the dependency of webpack, it just allows webpack to skip one of its own steps.
It still assumes its going to grab the asset extension that isn't a JS module.