如何通过Rollup将LESS打包为单个文件而非编译为CSS？

要输出原始LESS文件而非编译后的CSS，核心就是不让PostCSS编译LESS，同时确保Rollup能正确处理LESS文件的导入和输出，具体调整方案如下：

方案一：移除PostCSS，改用文件复制插件（推荐） #

既然不需要编译LESS，直接把源码里的LESS文件复制到打包输出目录，同时保留组件中对LESS的导入路径即可。

1. 安装文件复制插件：

npm install rollup-plugin-copy --save-dev

2. 修改Rollup配置：
   • 删除原有的postCss插件
   • 添加copy插件配置，复制LESS文件到输出目录
   • 标记LESS文件为外部依赖，避免被打包进JS文件

修改后的完整配置：

import nodeResolve from '@rollup/plugin-node-resolve';
import packageJson from './package.json' assert { type: 'json' };
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import terser from '@rollup/plugin-terser';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import dts from 'rollup-plugin-dts';
import copy from 'rollup-plugin-copy';

/**
 * @type {import('rollup').RollupOptions[]}
 */
export default [
    {
        input: './index.ts',
        output: [
            {
                file: packageJson.main,
                format: 'cjs',
                sourcemap: true,
            },
            {
                file: packageJson.module,
                format: 'esm',
                sourcemap: true,
            },
        ],
        plugins: [
            peerDepsExternal(),
            nodeResolve(),
            commonjs(),
            typescript({ tsconfig: './tsconfig.json' }),
            // 复制src下所有LESS文件到dist目录，保持原目录结构
            copy({
                targets: [
                    { src: 'src/**/*.less', dest: 'dist' }
                ]
            }),
            terser(),
        ],
        // 告诉Rollup不要打包LESS文件，保留组件中的导入路径
        external: [/\.less$/],
    },
    {
        input: './index.ts',
        plugins: [dts({ tsconfig: './tsconfig.json' })],
        output: {
            file: packageJson.types,
            format: 'esm',
        },
        external: [/\.css$/, /\.less$/],
    },
];

方案二：调整PostCSS配置，禁用LESS编译 #

如果不想移除PostCSS，也可以配置它仅复制LESS文件而不编译：

postCss({
  extract: false, // 不提取为CSS文件
  modules: false,
  use: {
    less: null // 禁用LESS编译功能
  },
  output: 'dist/styles' // 指定LESS文件输出目录
})

不过这种方式不如直接用copy插件直观，更推荐方案一。

额外注意事项 #

• 确保组件中导入LESS的路径为相对路径，打包后能正确指向输出目录中的文件
• 在package.json中可以添加style字段，方便使用者快速导入主LESS文件：

  "style": "dist/styles/main.less"
  

• 若使用TypeScript，需添加LESS类型声明避免编译报错：
  创建typings.d.ts文件：

  declare module '*.less' {
    const content: { [className: string]: string };
    export default content;
  }
  

这样打包完成后，你的组件库会输出未编译的LESS文件，使用者可以直接导入并修改LESS变量后自行编译样式。

内容的提问来源于stack exchange，提问作者Lehks