样式未通过 Rollup 导出

Question

我正在构建一个包含 React、Typescript 和 Css 模块的 ui 库。 Rollup 没有导出我的样式

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import dts from 'rollup-plugin-dts';
import postcss from 'rollup-plugin-postcss';

import terser from '@rollup/plugin-terser';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';

const packageJson = require('./package.json');

export default [
  {
    input: 'src/index.ts',
    output: [
      {
        file: packageJson.main,
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      postcss({
        modules: true,
        extensions: ['.css', '.scss'],
        use: ['sass'], // This enables SCSS preprocessing
        extract: true,
      }),

      typescript(),
      peerDepsExternal(),

      resolve(),
      commonjs(),

      terser(),
    ],
  },
  {
    input: 'dist/cjs/types/src/index.d.ts',
    output: [{ file: 'dist/index.d.ts', format: 'esm' }],
    plugins: [dts.default()],
    external: [/\.css$/],
  },
];

Storybook 一切正常，但部署到 npm 后，我失去了样式。

Answer 1

您只需在

postcss

中添加extract: 'styles.css',，这将在styles.css文件中添加所有样式：

postcss({
        modules: true,
        extract: 'styles.css',
        minimize: true,
        inject: false,
        sourceMap: true,
        extensions: ['.scss', '.css'],
        use: ['sass'],
      }),

请记住，安装您的软件包的任何人都必须导入样式文件，如下所示：

import "your-package/styles.css";