我有从我公司内部的组件库导入的组件。
组件库使用rollup：
rollup.config.mjsimport commonjs from '@rollup/plugin-commonjs';
import json from '@rollup/plugin-json';
import resolve from '@rollup/plugin-node-resolve';
import typescript from '@rollup/plugin-typescript';
import dts from 'rollup-plugin-dts';
import peerDepsExternalPlugin from 'rollup-plugin-peer-deps-external';
import postcss from 'rollup-plugin-postcss';
import { babel } from '@rollup/plugin-babel';
import { createRequire } from 'node:module';
const requireFile = createRequire(import.meta.url);
const packageJson = requireFile('./package.json');
export default [
{
input: 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true,
},
{
file: packageJson.module,
format: 'esm',
sourcemap: true,
},
],
plugins: [
babel({ babelHelpers: 'bundled' }),
resolve(),
commonjs(),
typescript({
exclude: ['**/tests/', '**/stories/'],
}),
json(),
postcss({
extensions: ['.css'],
}),
peerDepsExternalPlugin(),
],
},
{
input: 'dist/index.d.ts',
output: [{ file: 'dist/index.d.ts', format: 'es' }],
plugins: [dts()],
// not sure we want this (external) option here
external: [/\.css$/]
},
];
然后我构建它。
从 nextjs 应用程序中，我将其放在 json 包中。使用
yarn link但是没有任何样式可以使用我的组件库传递到我的下一个 js 应用程序。
我尝试将我的
next.config.js/** @type {import('next').NextConfig} */
module.exports = {
reactStrictMode: false,
compiler: {
styledComponents: {
// Enabled by default.
cssProp: true,
},
},
};
这是我的
.babelrc{
"plugins": ["babel-plugin-styled-components"]
}
这里的任何帮助都将是令人难以置信的。
这种通过样式标签将 CSS 注入保持内联到生成的 JavaScript 的方法对于 Next.js 不起作用，因为它生成了两个编译，即一个用于服务器，另一个用于客户端代码。想象一下您的库中有一个简单的组件：
import React from 'react';
import style from './style.css';
export function MyComponent() {
return (
<div className={style.root}>
<p>Hello world</p>
</div>
)
}
而且，你的 CSS 文件是这样的：
/* style.css */
.root {
display: flex;
font-size: 48px;
}
那么Rollup生成的bundle文件将是：
import React from 'react';
// Very simplified version.
function styleInject(css) {
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.styleSheet.cssText = css;
head.appendChild(style);
}
// Side effects (These won't be included in the client-side bundle)
var css_248z = ".root {\n display: flex;\n font-size: 48px;\n}\n";
styleInject(css_248z);
function MyComponent() {
return React.createElement(
"div",
{ className: css_248z.root },
React.createElement("p", null, "Hello world")
);
}
export { MyComponent };
这里的问题是 Next.js 不会在客户端包中包含 styleInject
函数，并且在服务器端运行此代码是没有意义的。因此
唯一的方法是为您的库实际生成/发出一个独立的 CSS 文件，然后将其包含在您的 Next.js 应用程序中。 更改 rollup-plugin-postcss
配置，如下所示：
postcss({
// Extract the CSS into a standalone file.
extract: true,
// You will have to use CSS Modules.
modules: true,
extensions: ['.css'],
}),
这将生成index.css
文件：
/* Name mangled */
.style_root__WnIqm {
display: flex;
font-size: 48px;
}
并且，捆绑的 JS 代码将简单地引用此 CSS 类，让应用程序开发人员确保 CSS 正确注入：
// Bundled JS File by the Rollup after extraction
import React from 'react';
var style = { "root": "style_root__WnIqm" };
function MyComponent() {
return React.createElement(
"div",
{ className: style.root },
React.createElement("p", null, "Hello world")
);
}
export { MyComponent };
最后，在您的 Next.js 应用程序布局文件 src/app/layout.jsx
或
tsx文件中，您可以导入以下 CSS：
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'
// IMPORTANT: Library import CSS
import 'my-awesome-library/index.css';
const inter = Inter({ subsets: ['latin'] })
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
export default function RootLayout({ children }) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
</html>
)
}