How can I include npm-based styles in my Clojurescript project?

clojurescript

#1

I’m starting a Re-frame project that will need some less/sass styles found in an NPM repo at our company. I’m not very familiar with the css pipelines out there, but I just need to import this project and figure out how to get the styles I need into my front-end. Where do I start?


#2

If it’s a public NPM library, I’d start by browsing what the NPM package ships with. I like unpkg.com for this purpose. Here’s react-select’s dist folder: https://unpkg.com/[email protected]/dist/

As you can see, the NPM distribution contains a compiled css file, which you can just drop in your project. Personally I’d just copy it to the project and commit it to the repo, which is not pretty but saves you a ton of tooling headaches. Or you might even try hotlinking to https://unpkg.com/[email protected]/dist/react-select.min.css - definitely not the recommended approach but what’s the worst that can happen?

If we’re talking about a NPM dep private to your organization, the details depend on how that’s laid out, and what your build process looks like.


#3

With boot you’d something like:

  • put the folder from node_modules in your resources-path
  • use a combination of the shift and target tasks to place them where your want

It’s the big picture.


#4

Putting node_modules under Boot’s care sounds like a recipe for pain, if you’re not careful. The folder easily contains thousands of files, which Boot would try to watch for changes or even add to the fileset. This would probably cause performance issues.


#5

I was talking about node_modules/module_with_css. You’re right though, node_modules is a bad idea.


#6