Npm package styles are not applying on class

Question

I create my react npm package using webpack but when i install my npm package to my react project, package styles are not apply on classes. Why this happens

Here is the link of npm package. You can install 0.0.5 version. In my webpack i used style-loader but it shows me document is not defined errors but if enable following line

const MiniCssExtractPlugin = require('mini-css-extract-plugin');

Document not defined error resolved but styles not apply on classes in react project

Here is webpack file image

Here is package.json file image

Here is Test.jsx file image

Here is the main.css build file image which webpacks generates

Here is the test.js build file image which webpacks generates

Here is test.scss file image

Can you provide some sample code here for better understanding and can you add the link for what npm package you have created? — VnoitKumar, Jul 28 '20 at 08:14
Please read [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask) — str, Jul 28 '20 at 08:23
Here is the link of npm package. https://www.npmjs.com/package/@afiniti/test/v/0.0.5. You can install 0.0.5 version. In my webpack i used style-loader but it shows me document is not defined errors but if enable following line const MiniCssExtractPlugin = require('mini-css-extract-plugin'); Document not defined error resolved but styles not apply on classes in react project — Syed Shah Hassan, Jul 28 '20 at 11:10
@VnoitKumar Here is the link of npm package. npmjs.com/package/@afiniti/test/v/0.0.5. You can install 0.0.5 version. In my webpack i used style-loader but it shows me document is not defined errors but if enable following line const MiniCssExtractPlugin = require('mini-css-extract-plugin'); Document not defined error resolved but styles not apply on classes in react project — Syed Shah Hassan, Jul 28 '20 at 11:19

Hassaan Tauqir · Answer 1 · 2020-07-29T18:45:13.120

Your webpack is working fine. You just need to import your styles manually from your build. This usually has to be done for all packages which define styles.

For ReactStrap you have to add this for styles

import 'bootstrap/dist/css/bootstrap.min.css';

For AntDesign you need this

import 'antd/dist/antd.css';

Same way you need to take import your styles from your build. i.e

import "@afiniti/test/build/main.css";

And your styles would start working.

Example code

import Test from "@afiniti/test";
import "@afiniti/test/build/main.css";

export default function App() {
  return (
    <Test />
}

Here is a link to a simplified working codesandbox. Good Luck!

Npm package styles are not applying on class

1 Answers1