如何在 npm 包中导出和导入样式？

Question

我有一个 React 组件，我在使用 webpack 构建的 NPM 注册表中发布了该组件。在我的主项目中，我像这样使用了组件 npm 包 JS：

import myComp from 'myComp';

问题是 myComp 也有 CSS，我在 webpack 和 ExtractTextPlugin 的帮助下将其构建到 dist/index.css 中（将所有 css 构建到一个文件中）。

我想使用这样的风格：

import 'myComp/index.css';

或者

import 'myComp/index';

在myComp npm 包中，我想以支持这种导入方法的方式公开它。

注意：我不想直接从node_modules 导入

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

谢谢！

Answer 1

所以这比我想象的要容易，你需要做的就是像这样导入 CSS（就像我在问题中所做的那样）：

import 'myComp/dist/style.css';

并确保您的工具（浏览器/webpack 等）可以处理将 css 加载到您的 javascript 文件中。

所以问题与构建过程更相关。

---

另外，如果您想将特定代码推送到 npm 注册表中，您可以使用 package.json 中的“文件”。这样一来，您最终只会在 npm 注册表中获得所需的文件。

files: [
"dist/*.css"
]

您还可以使用以下工具： https://github.com/rotundasoftware/parcelify - 用于浏览器化 https://www.npmjs.com/package/parcelify-loader - 用于 webpack

但我不喜欢他们。它强制依赖你的 npm 包的使用者。