我从公司内部的组件库中导入组件。
组件库使用rollup。
然后我构建它。
从nextjs应用程序中,我在package json中有它。使用yarn link将两个仓库链接在一起(我知道yarn link是有效的)。
但是我的组件库没有将任何样式传递给我的next js应用程序。
我尝试将我的next.config.js更改为这样,但没有任何效果。
这是我的
任何帮助在这里都将是难以置信的。
组件库使用rollup。
rollup.config.mjs
import 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应用程序中,我在package json中有它。使用yarn link将两个仓库链接在一起(我知道yarn link是有效的)。
但是我的组件库没有将任何样式传递给我的next 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"]
}
任何帮助在这里都将是难以置信的。