Is it possible to input and output multiple files?

[vincelawdev]

I am moving over to rollup from gulp.

I was wondering if it might be possible to get two or more separate input .scss files to output to two or more separate .css files?

file1.scss -> file1.css
file2.scss -> file2.css

Thanks in advance.

[frankypixels]

Really wish this was a thing too... Made an issue without reading/looking to see if there already was one. Regardless. It would be nice to have this feature!

[The-Code-Monkey]

Yeah this is something im currently looking for? is there any update to this?

[saurab1996]

@vincelawdev @frankypixels @The-Code-Monkey @thgh

example - index.js

import "file1.scss ";
import "file2.scss ";


//rollup.config.js

output:  function (styles, styleNodes) {
          // Loop through all the style nodes (SCSS imports)
          Object.keys(styleNodes).forEach( (styleNode) => {
            const scssFilePath = styleNode;

            // Derive the output CSS file name from the SCSS file name
            const cssFileName = scssFilePath
              .split("/")
              .pop() // Get the file name
              .replace(".scss", ".min.css"); // Replace .scss extension with .min.css

            // Write each CSS file to disk ( sample path )
            const cssOutputPath = path.resolve(
              __dirname,
              "./assets/output/css",
              cssFileName
            );

            try {
              const result = sass.renderSync({ file: scssFilePath });
              writeFileSync(cssOutputPath, result.css.toString());
            } catch (err) {
              console.error("Sass compilation error:", err.message);
              process.exit(1);
            }
          });
        }