How to export and import style in npm package?

Exporting and importing styles in an npm package enhances the usability and convenience of the package, especially when integrated into frontend projects. Below, I will outline how to export and import style files.

1. Creating and Exporting Styles

First, create a style file in your npm package project. This file can be a plain CSS file or a preprocessor file, such as Sass or Less. Let's assume we create a file named styles.css:

css
/* styles.css */
.button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}

Next, ensure this style file is included in your npm package's published files. This is typically achieved by configuring the files field in package.json or ensuring it is not excluded in .npmignore.

json
{
  "name": "your-package",
  "version": "1.0.0",
  "main": "index.js",
  "files": [
    "index.js",
    "styles.css"
  ]
}

2. Importing Styles

For users of your npm package, importing style files can be done in several ways. Here are common scenarios:

a. Using Native CSS

Users can import the style file directly in their project using the standard CSS @import rule:

css
@import 'your-package/styles.css';

Alternatively, directly reference it in an HTML file:

html
<link rel="stylesheet" href="node_modules/your-package/styles.css">

b. Using JavaScript

If the user's project supports importing CSS via JavaScript (e.g., using Webpack), they can import the style file directly in a JavaScript file:

javascript
import 'your-package/styles.css';

This method provides more flexible control over style imports, and with module bundlers like Webpack, you can leverage advanced features such as Hot Module Replacement.

3. Example

Suppose I previously developed an npm package for a button component named fancy-button. The package includes a fancy-button.css file defining the basic styles of the button. Users can import this CSS file in any of the following ways:

HTML Reference:

html
<link rel="stylesheet" href="node_modules/fancy-button/fancy-button.css">

CSS @import:

css
@import 'fancy-button/fancy-button.css';

JavaScript Import:

javascript
import 'fancy-button/fancy-button.css';

This approach to importing and exporting styles makes the package very flexible and easy to use, while also ensuring the encapsulation and reusability of styles.