When setting up Rollup to compile JavaScript and SCSS in my custom WordPress theme swagdrip, I ran into some frustrating issues

1️⃣ Rollup Watch Was Running but Not Updating CSS

• Initially, npm run watch was running, but the dist/main.min.css file was not updating when I changed my SCSS files.
• Running npx sass assets/scss/main.scss dist/main.css manually worked, but it wasn’t automated.

2️⃣ Main CSS Outputted undefined$1 = undefined;

• Instead of valid CSS, the compiled main.min.css file contained:jsCopyEditvar undefined$1 = undefined; export { undefined$1 as default };
  • This indicated that Rollup wasn’t processing the SCSS correctly.

3️⃣ Rollup Config Issues

• Rollup was treating the config as an ES module (import not working).
• Running npm run watch returned:javascriptCopyEditReferenceError: require is not defined in ES module scope
• Rollup couldn’t properly handle SCSS, leading to broken styles.

🛠 Fixing the Rollup Watch & SCSS Compilation

✅ 1. Ensuring Proper SCSS Compilation

To manually check if SCSS was compiling correctly, I ran:

shCopyEditnpx sass assets/scss/main.scss dist/test.css

If this works and test.css contains valid styles, then the issue is with Rollup rather than Sass itself.

✅ 2. Fixing Rollup Configuration

My rollup.config.js had some issues with output handling. The updated version looks like this:

jsCopyEditimport commonjs from '@rollup/plugin-commonjs';
import resolve from '@rollup/plugin-node-resolve';
import babel from '@rollup/plugin-babel';
import replace from '@rollup/plugin-replace';
import terser from '@rollup/plugin-terser';
import postcss from 'rollup-plugin-postcss';
import autoprefixer from 'autoprefixer';

export default [
  {
    input: 'assets/js/index.js', // JS Build
    output: {
      file: 'dist/main.min.js',
      format: 'iife',
      sourcemap: true,
    },
    plugins: [
      commonjs(),
      resolve(),
      babel({ babelHelpers: 'bundled' }),
      replace({
        'process.env.NODE_ENV': JSON.stringify('production'),
        preventAssignment: true,
      }),
      terser(),
    ],
    watch: {
      clearScreen: false,
    },
  },
  {
    input: 'assets/scss/main.scss', // SCSS Build
    output: {
      file: 'dist/main.min.css', // Dummy output, PostCSS handles the actual file
    },
    plugins: [
      postcss({
        plugins: [autoprefixer],
        extract: 'dist/main.min.css', // Ensures CSS is actually written
        minimize: true,
        sourceMap: true,
      }),
    ],
  },
];

Key Fixes:

• Removed unnecessary external configurations.
• Ensured PostCSS properly outputs main.min.css.
• Kept the iife format for JS bundling.

✅ 3. Cleaning Node Modules & Reinstalling

If you’re having persistent issues, do a full reset:

shCopyEditrm -rf node_modules package-lock.json dist/*
npm cache clean --force
npm install
npm run build

This wipes everything and reinstalls dependencies.

🎨 Refining List Styles for Blog Readability

After fixing Rollup, I wanted to improve the spacing and styling of lists in my posts. By default, ul elements had small black dots that looked uneven. To fix this, I updated my SCSS:

scssCopyEdit/* Improve list styling */
ul {
    list-style: none; /* Remove default bullets */
    padding-left: 1.5rem; /* Add some left padding */
}

ul li::before {
    content: "➤"; /* Custom bullet */
    color: #000; /* Adjust to fit your theme */
    font-size: 1rem;
    margin-right: 0.5rem;
}

li {
    margin-bottom: 0.75rem; /* Increase spacing between list items */
}

Before: Small, default black dots with no spacing.
After: Cleaner ➤ bullets with consistent padding.

🚀 Final Thoughts

Fixing Rollup watch and SCSS compilation took a mix of debugging and resetting dependencies. Now, my theme automatically updates styles when I save an SCSS file, and my lists look much cleaner.

Next Steps:

• Further optimize Rollup build times.
• Experiment with adding CSS variables for better styling control.

Have you run into similar Rollup + SCSS issues? Drop a comment below! 👇