我已经使用 TSDX 创建了一个 React 库 → https://github.com/deadcoder0904/react-typical它使用 CSS 模块并将样式附加到 React 库。该包正确地将 CSS 文件输出到dist/文件夹中，但它从未真正按应有的方式引用它。这导致我的样式根本不显示。这是我的完整tsdx.config.js：const postcss = require('rollup-plugin-postcss');const { terser } = require('rollup-plugin-terser');const autoprefixer = require('autoprefixer');const cssnano = require('cssnano');module.exports = { rollup(config, options) { config.plugins.push( postcss({ modules: true, plugins: [ autoprefixer(), cssnano({ preset: 'default', }), ], inject: false, // only write out CSS for the first bundle (avoids pointless extra files): extract: !!options.writeMeta, minimize: true, }), terser() ); return config; },};如果您在https://yarnpkg.com/package/@deadcoder0904/react-typical?filesdist/看到该文件夹，那么您会注意到它有文件，但它根本不引用该文件。index.js.css文件夹中的每个.js文件都一样dist/。没有文件引用.css文件，CSS 代码根本没有捆绑，所以它只是不使用样式。我该如何解决这个问题？
2 回答
达令说
TA贡献1821条经验 获得超6个赞
据我了解，通常一个库通常会单独介绍组件和样式，并在文档中让用户知道他们是否想使用默认样式，然后也让导入 css 文件，例如：
import ReactTypical from "react-typical"
import "react-typical/dist/react-typical.cjs.development.css"
我猜这和你的情况一样
或者你会默认设置你的样式而不要求他们手动导入这意味着你必须通过设置来优化你的配置inject: true，它会将你的 css 上下文导入你的js文件然后在运行时执行以将脚本附加到<head />文档中。然后您更改的配置将如下所示：
postcss({
modules: true,
plugins: [
autoprefixer(),
cssnano({
preset: 'default',
}),
],
// Append to <head /> as code running
inject: true,
// Keep it as false since we don't extract to css file anymore
extract: false,
})
HUX布斯
TA贡献1876条经验 获得超6个赞
为了使用故事书，请将以下 css 规则添加到您的webpack故事书配置中./story/main.js：
// Remove the existing css rule
config.module.rules = config.module.rules.filter(
f => f.test.toString() !== '/\\.css$/'
);
config.module.rules.push(
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
include: path.resolve(__dirname, "../src"),
}
)
但是你在你的包依赖中错过了它们，只记得添加它们：
npm i -D style-loader css-loader
添加回答
举报
0/150
提交
取消