use*_*760 16 css rollup reactjs next.js
我制作了一个导出单个组件的小型 npm 包。该组件使用 SCSS 模块设计样式，并使用 Rollup 捆绑在一起。一切似乎都工作正常，但是当我将它导入到 NextJS 项目中时，我注意到这些样式没有应用于从 NextJS 发送的 SSR 文档（它们最终确实得到了应用，但是有一个问题，组件未设置样式）。
这是我第一次创建 npm 包，也是第一次使用 Rollup，我很难弄清楚如何解决这个问题。也许我不需要将 CSS 捆绑到 .js 文件中并指示用户自己导入 css 文件？不过，我试图避免采取额外的步骤。也许使用 CSS-in-JS 可以解决这个问题，但如果可以避免的话，我宁愿不添加依赖项。
任何指示将不胜感激！
我的汇总配置如下所示：
const config = [
{
input: "src/lib/index.ts",
output: [
{
file: pkg.main,
format: "cjs",
sourcemap: true,
},
{
file: pkg.module,
format: "esm",
sourcemap: true,
},
],
plugins: [
peerDepsExternal(),
resolve(),
commonjs(),
url(),
svgr(),
typescript({ tsconfig: "./tsconfig.json", rootDir: "src/lib" }),
postcss({
modules: true,
}),
terser(),
bundleSize(),
visualizer(),
],
},
{
input: "dist/esm/types/index.d.ts",
output: [{ file: "dist/index.d.ts", format: "esm" }],
plugins: [
dts(),
del({ hook: "buildEnd", targets: ["dist/cjs/types", "dist/esm/types"] }),
],
},
];
我不确定它是否相关，但我的 tsconfig 看起来像这样：
{
"compilerOptions": {
"target": "es5",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true,
"jsx": "react",
"module": "ESNext",
"declaration": true,
"declarationDir": "types",
"sourceMap": true,
"outDir": "dist",
"moduleResolution": "node",
"allowSyntheticDefaultImports": true,
"removeComments": true,
"plugins": [{ "name": "typescript-plugin-css-modules" }]
},
"include": ["src/lib/customModules.d.ts", "src/**/*"]
}
Next.js由于其服务器端和客户端代码的双重编译过程，不支持注入CSS的方式。
因此，解决方案是为您的库生成或发出独立的 CSS 文件，然后将其合并到您的 Next.js 应用程序中。
您应该将构建的 css 文件导入 Next.js 应用程序布局文件 src/app/layout.jsx 或 tsx 文件中。
import 'my-component/index.css';
export default function RootLayout({ children }) {
return (
<html lang="en">
<body>{children}</body>
</html>
);
}
请检查此参考：How to use styled-components with rollup and next.js - css not importing
| 归档时间： |
|
| 查看次数： |
775 次 |
| 最近记录： |