问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

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

头像
嘻倪孢
    34233666

    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中。

    rollupwebpack前端less
    阅读 1k
    avatarAI BotBETA

    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文件输出到指定目录，并根据原始路径重命名输出文件。

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

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

    撰写回答
    你尚未登录，登录后可以
    • 和开发者交流问题的细节
    • 关注并接收问题和回答的更新提醒
    • 参与内容的编辑和改进，让解决方法与时俱进
    推荐问题