前端 - rollup打包less如果生成单个css文件?

Question

rollup打包将less文件转换成css文件， 我要开发一个react组件库，打包后输出esm格式，但是现在所有less都打包成一个文件了，我希望每个css还是单独分开

/**原始结构test    index.tsx    index.less希望输出的结构test    index.js    index.css**/

我用rollup-plugin-postcss 或者rollup-plugin-less都不会输出index.css。要么就是把所有less合并生产一个css, 要么就是用styleInject 添加到head中。

Answer 1

rollup打包less文件生成单个css文件，你需要使用rollup-plugin-css-only插件。这个插件可以将你的less文件转换成单独的css文件，而不是将它们合并成一个文件。

以下是一个示例配置，展示了如何使用rollup-plugin-css-only插件来生成单独的css文件：

import resolve from '@rollup/plugin-node-resolve';import commonjs from '@rollup/plugin-commonjs';import typescript from 'rollup-plugin-typescript2';import postcss from 'rollup-plugin-postcss';import cssOnly from 'rollup-plugin-css-only';export default {  input: 'src/index.tsx',  output: {    file: 'dist/index.js',    format: 'esm',  },  plugins: [    resolve(),    commonjs(),    typescript(),    postcss({      extract: true, // 启用css提取      plugins: [        require('less')(), // 使用less插件      ],    }),    cssOnly({      output: 'dist', // 指定输出目录      rename: (assetPath, originalPath) => {        // 根据原始路径重命名输出文件        const relativePath = originalPath.replace('src/', '');        return relativePath.replace(/\.tsx?$/, '.css');      },    }),  ],};

在上述配置中，我们使用rollup-plugin-postcss插件来处理less文件，并将extract选项设置为true，以启用css提取。然后，我们使用rollup-plugin-css-only插件来将提取的css文件输出到指定目录，并根据原始路径重命名输出文件。

请注意，上述配置中的路径和插件可能需要根据你的项目结构和需求进行适当修改。另外，确保已正确安装所有必需的依赖项，并根据你的项目类型选择适当的插件和配置。

希望这可以帮助你解决问题！如果你还有其他疑问，请随时提问。