Npm 包样式不适用于类答案

【问题标题】：Npm package styles are not applying on classNpm 包样式不适用于类
【发布时间】：2020-11-17 15:12:09
【问题描述】：

我使用 webpack 创建了我的 react npm 包，但是当我将我的 npm 包安装到我的 react 项目时，包样式不适用于类。为什么会发生这种情况

这里是 npm 包的link。您可以安装 0.0.5 版本。在我的 webpack 中，我使用了 style-loader，但它显示文档未定义错误，但如果启用以下行

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

文档未定义错误已解决，但样式不适用于 react 项目中的类

【问题讨论】：

你能在这里提供一些示例代码以便更好地理解吗？你能添加你创建的 npm 包的链接吗？
请阅读How do I ask a good question?
这里是npm包的链接。 npmjs.com/package/@afiniti/test/v/0.0.5。您可以安装 0.0.5 版本。在我的 webpack 中，我使用了 style-loader，但它显示文档未定义错误，但如果启用以下行 const MiniCssExtractPlugin = require('mini-css-extract-plugin');文档未定义错误已解决，但样式不适用于反应项目中的类
@VnoitKumar 这里是 npm 包的链接。 npmjs.com/package/@afiniti/test/v/0.0.5。您可以安装 0.0.5 版本。在我的 webpack 中，我使用了 style-loader，但它显示文档未定义错误，但如果启用以下行 const MiniCssExtractPlugin = require('mini-css-extract-plugin');文档未定义错误已解决，但样式不适用于反应项目中的类

【解决方案1】：

您的 webpack 工作正常。您只需要从您的构建中手动导入您的样式。这通常必须对所有定义样式的包进行。

对于ReactStrap，你必须为样式添加这个

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

AntDesign 你需要这个

import 'antd/dist/antd.css';

您需要以同样的方式从构建中导入样式。即

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

您的样式将开始起作用。

示例代码

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

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

这里是一个简化的工作codesandbox 的链接。祝你好运！

【讨论】：