SCSS and Rollup Compilation Issues
Working with WordPress, Rollup, and SCSS can be tricky, especially when things break, and it feels like you’re running in circles.
I recently ran into an issue where my SCSS file was not compiling, and my main.min.css
file wasn’t showing up on my WordPress site. After several troubleshooting steps, I finally managed to get everything working seamlessly.
Here’s a step-by-step breakdown of what happened and how I fixed the issue.
The Problem
The issue started when I tried to get my SCSS files compiled and bundled using Rollup. My build process was generating main.min.js
fine, but the main.min.css
file wasn’t being updated, and WordPress couldn’t load the CSS. This error was in my browser’s console:
bashCopyGET https://mnrdsgn.com/wp-content/themes/swagdrip/dist/main.min.css?ver=1.0 net::ERR_ABORTED 404 (Not Found)
This meant that the file wasn’t being generated or linked correctly.
Steps I Took to Fix It
1. Manually Compiling SCSS
First, I tried manually compiling my SCSS to see if the issue was related to SCSS processing. Using the following command, I was able to generate the missing main.min.css
file:
bashCopynpx sass assets/scss/main.scss dist/main.min.css
This generated the expected main.min.css
file in the dist/
folder, confirming that the SCSS syntax was fine.
2. Rollup Configuration Fix
Next, I turned my attention to Rollup, which wasn’t compiling the SCSS automatically. After doing some research, I realized that Rollup wasn’t using the latest version of Sass. It was relying on the deprecated legacy-js-api
.
I had to update my Rollup configuration to use the latest version of sass
(the Dart Sass API) instead. Here’s how I updated my rollup.config.js
:
Updated rollup.config.js
:
javascriptCopyimport 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';
import sass from 'sass'; // Explicitly import the modern Sass API
export default {
input: 'assets/js/index.js',
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(),
postcss({
plugins: [
autoprefixer(),
],
extract: 'dist/main.min.css', // Directly output to the correct file
minimize: true,
sourceMap: true,
sass: {
implementation: sass, // Explicitly use the latest Sass implementation
}
})
],
watch: {
clearScreen: false
}
};
This ensured that Rollup uses the modern Sass API, which eliminated the deprecation warning.
3. Watching Files for Changes
With the new configuration in place, I ran the following command to continuously watch for changes in my SCSS and JavaScript files:
bashCopynpm run build --watch
This command kept Rollup running and watching my files for changes, automatically recompiling the SCSS whenever I made edits.
4. Clearing Browser Cache
Once the build was running smoothly and the main.min.css
file was being generated, I cleared my browser cache and tested again.
Final Results
After completing the above steps, everything started working as expected:
- SCSS compiled to CSS correctly.
- Rollup watched for changes and compiled files as needed.
- WordPress loaded the
main.min.css
file correctly without any errors.
Now, I could see the styles applied on my WordPress site without any issues.
Additional Tips
- Use
npx sass --watch
: If you want SCSS changes to be compiled automatically without running Rollup, use this command in addition to Rollup’s watch mode:bashCopynpx sass --watch assets/scss/main.scss:dist/main.min.css --no-source-map
- Update Sass Regularly: Keep your
sass
version updated to avoid deprecation issues. Always check that you’re using the latest API when working with Rollup.
Conclusion
By manually compiling SCSS, ensuring Rollup used the correct version of Sass, and running npm run watch
, I was able to resolve the issue and get my styles working again. WordPress now correctly loads the compiled CSS file, and my site is fully styled with no further issues.