CSS模块被捆绑，但没有使用TSDX引用，TSDX使用的是卷起底座
我已经使用TSDX→→创建了一个反应库。
它使用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;
},
};如果您看到dist/文件夹在https://yarnpkg.com/package/@deadcoder0904/react-typical?files，那么您会注意到它有index.js文件，但它根本不引用.css文件。
每个.js文件在dist/文件夹中都是一样的。没有文件引用.css文件& CSS代码根本没有绑定，所以它只是不使用样式。
我该怎么解决这个问题？
回答 2
Stack Overflow用户
发布于 2020-08-08 15:46:36
据我理解，通常库通常分别介绍组件&样式，如果用户希望使用默认样式，请让他们在文档中知道，然后也允许导入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,
})Stack Overflow用户
发布于 2020-08-09 15:06:14
为了处理故事书，请将以下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-loaderhttps://stackoverflow.com/questions/63285566
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号