Npm 包样式不适用于类

Posted 2023-03-06

【中文标题】Npm 包样式不适用于类

【英文标题】：Npm package styles are not applying on class

【发布时间】：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 项目中的类

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

【问题讨论】：

你能在这里提供一些示例代码以便更好地理解吗？你能添加你创建的 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 的链接。祝你好运！