如何使用Rollup.js编译单个SCSS文件

我刚好做过类似的需求，用Rollup来批量处理SCSS文件，把src/assets/scss下的每个SCSS文件编译到dist/assets/css目录下的同名CSS文件（包括嵌套目录结构），下面是具体的实现步骤：

1. 安装必要依赖 #

首先需要安装Rollup核心包，以及处理SCSS的相关插件，还有用来批量匹配文件的glob：

npm install rollup rollup-plugin-scss sass glob --save-dev
# 如果需要更灵活的CSS处理（比如自动前缀、压缩），可以用rollup-plugin-postcss替代rollup-plugin-scss：
# npm install rollup rollup-plugin-postcss sass postcss autoprefixer cssnano glob --save-dev

2. 编写Rollup配置文件 #

在项目根目录创建rollup.config.js，通过glob匹配所有SCSS文件，然后为每个文件生成独立的Rollup配置项，确保编译后的CSS路径与源文件对应：

基础版本（仅编译SCSS） #

const glob = require('glob');
const scss = require('rollup-plugin-scss');
const path = require('path');

// 匹配src/assets/scss下所有SCSS文件（包括子目录）
const scssFiles = glob.sync('src/assets/scss/**/*.scss');

// 生成Rollup配置数组
module.exports = scssFiles.map(file => {
  // 计算源文件相对于scss目录的路径，保留嵌套结构
  const relativePath = path.relative('src/assets/scss', file);
  // 生成对应的CSS输出路径
  const outputCssPath = path.join('dist/assets/css', relativePath).replace('.scss', '.css');
  
  return {
    input: file,
    // Rollup需要输出一个JS文件（可以忽略，我们只关心CSS），这里输出到临时目录
    output: {
      file: `dist/temp/${path.basename(file, '.scss')}.js`,
      format: 'es'
    },
    plugins: [
      scss({
        output: outputCssPath,
        // 可选：设置CSS输出格式，compressed为压缩模式
        // outputStyle: 'compressed'
      })
    ]
  };
});

增强版本（支持自动前缀、CSS压缩） #

如果需要更专业的CSS处理，用rollup-plugin-postcss替代rollup-plugin-scss，配置如下：

const glob = require('glob');
const postcss = require('rollup-plugin-postcss');
const path = require('path');

const scssFiles = glob.sync('src/assets/scss/**/*.scss');

module.exports = scssFiles.map(file => {
  const relativePath = path.relative('src/assets/scss', file);
  const outputCssPath = path.join('dist/assets/css', relativePath).replace('.scss', '.css');
  
  return {
    input: file,
    output: {
      file: `dist/temp/${path.basename(file, '.scss')}.js`,
      format: 'es'
    },
    plugins: [
      postcss({
        extract: outputCssPath, // 直接指定CSS输出路径
        use: ['sass'], // 使用sass编译SCSS
        plugins: [
          require('autoprefixer'), // 自动添加浏览器前缀
          require('cssnano') // 压缩CSS
        ]
      })
    ]
  };
});

3. 添加编译命令 #

在package.json的scripts中添加编译命令：

{
  "scripts": {
    "build:css": "rollup -c rollup.config.js",
    // 可选：添加清理临时文件的命令，比如用rimraf
    // "clean:temp": "rimraf dist/temp",
    // "build": "npm run clean:temp && npm run build:css"
  }
}

4. 执行编译 #

运行以下命令即可完成编译：

npm run build:css

执行后，你会看到dist/assets/css目录下生成了与src/assets/scss结构完全一致的CSS文件，比如src/assets/scss/sub/c.scss会被编译为dist/assets/css/sub/c.css。

注意事项 #

• 临时生成的dist/temp目录可以保留，也可以用rimraf等工具在编译前清理，避免冗余文件。
• 如果不需要嵌套目录结构，只需要把所有CSS输出到dist/assets/css根目录，直接用path.basename(file, '.scss') + '.css'作为输出文件名即可。

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