how to export and import style in npm package?

Question

I have a React component and I publish the component in NPM registry that I build with webpack. In my main project I consumed the component npm package JS like that:

import myComp from 'myComp'; 

The problem is that myComp also has CSS, that I build into dist/index.css with the help of webpack and ExtractTextPlugin (which builds all the css into one file).

And I want to consume the style like this:

import 'myComp/index.css'; 

Or

import 'myComp/index'; 

And in myComp npm package I want to expose it in a way that will support this import method.

NOTE: I don't want to import it directly from node_modules

import '../../../node_modules/myComp/index.css'; // bad 

Thanks!

Answer 1

So it's easier than I thought, all you need to do is import the CSS like that (as I did in the question):

import 'myComp/dist/style.css'; 

And make sure your tools (browserify/webpack etc..) can handle loading css into your javascript file.

So the issue was more related to the building process.

---

Also, if you want to push specific code into npm registry you can use "files" inside package.json. This way you'll end up with just the files you need in npm registry.

files: [ "dist/*.css" ] 

You can also use tools like: https://github.com/rotundasoftware/parcelify - for browserify https://www.npmjs.com/package/parcelify-loader - for webpack

But I didn't like them. It forces a dependency on the consumer of your npm package.