css - 如何在 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 中的"file"。这样你就可以在 npm 注册表中得到你需要的文件了。

files: [
"dist/*.css"
]

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

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