CSS Preprocessors in Meteor: Time to Modernize the Defaults?

1

Context

As part of Meteor’s ongoing modernization effort, I’d like to open a discussion about CSS preprocessors and how Meteor ships them today.

The skel-full skeleton currently includes the less package by default. While LESS served us well historically, I think it’s worth revisiting this choice in 2026.

Native CSS has caught up — a lot

Modern CSS now covers many use cases that required a preprocessor just a few years ago:

Nesting (supported in all major browsers since Dec 2023):

.card {
  background: white;

  .title {
    font-size: 1.2rem;
  }

  &:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
}

Custom properties (CSS variables):

:root {
  --primary: #3b82f6;
  --radius: 8px;
}

.button {
  background: var(--primary);
  border-radius: var(--radius);
}

@layer for managing specificity:

@layer base, components, utilities;

@layer components {
  .btn { padding: 0.5rem 1rem; }
}

color-mix(), :has(), @container queries — the list keeps growing. For many projects, plain CSS is now sufficient.

When you do need a preprocessor, SCSS is the clear winner

Looking at the ecosystem in 2026:

  • Bootstrap 4 & 5 — built on SCSS
  • npm download trends — sass dwarfs less in weekly downloads
  • Framework defaults — Angular, Rails, and most major frameworks default to SCSS
  • Features — SCSS offers modules (@use / @forward), maps, richer functions, namespaces — things LESS simply doesn’t have
  • Tooling — better IDE support, linters (stylelint), and documentation

LESS is mostly associated with the Bootstrap 3 era at this point.

The current situation in Meteor

  • less lives in packages/non-core/ — maintained in the repo but not technically a “core” package
  • fourseven:scss is the go-to SCSS package — community-maintained, widely used, but not in core
  • skel-full ships with less by default, which sends a signal to newcomers that LESS is the recommended choice

For someone discovering Meteor today, this feels outdated.

Proposal

I’d suggest a two-part change:

1. Remove less from skel-full defaults

No skeleton should ship with a CSS preprocessor by default. Let developers choose. This is consistent with the other skeletons (skel-react, skel-blaze, etc.) which already ship without one.

2. Add a core scss package

Just like less lives in packages/non-core/, we could add an scss package maintained in the Meteor repo. This would give developers a first-class, maintained option:

meteor add scss    # or
meteor add less    # still available, still maintained

Optionally, meteor create could offer a --css flag:

meteor create my-app --css=scss
meteor create my-app --css=less
meteor create my-app           # plain CSS, no preprocessor

Summary

  • Native CSS is powerful enough for many projects in 2026
  • When a preprocessor is needed, SCSS is the industry standard
  • Meteor should reflect this by not defaulting to LESS and by offering SCSS as a core option
  • This is a small change with a positive signal for newcomers evaluating the framework

What do you think? Would love to hear from the community

2 Likes
2

As of 3.4 and the rspack stuff, Meteor doesn’t need to handle any of this if I understand correctly. The only takeaway for me here that meteor should deprecate its less package. @nachocodoner

3

As @harry97 mentioned, with the Rspack bundler, CSS and preprocessors can be defined as part of the Rspack pipeline. This way, we don’t need to maintain them inside Meteor, and their maintenance is delegated to the wider ecosystem.

All Meteor-specific compilers like Less and SCSS can still be used. By default, they are processed when they are inside entry folders (those defined in the meteor app’s package.json).

In Meteor 3.4, if you use .meteorignore and add:

# Ignore Meteor SCSS handling
client/*.scss

Meteor won’t process those styles, and you can handle them through the Rspack pipeline if configured properly. Rspack supports many CSS preprocessors as shown in the guide. For example, with SCSS:

module.exports = defineConfig(Meteor => ({
  module: {
    rules: [
      {
        test: /\.scss$/i,
        use: [
          {
            loader: 'sass-loader',
            options: {
              api: 'modern-compiler',
              implementation: require.resolve('sass-embedded'),
            },
          },
        ],
        type: 'css/auto',
      },
    ],
  },

If you import SCSS in your JavaScript, Rspack will process it and make it available in your Meteor app. Meteor won’t use fourseven:scss or other Atmosphere build plugins for those files.

I updated all skeletons and examples to use Rspack compilers. They stay up to date and bring improvements without relying on Atmosphere packages, letting us focus on other parts of Meteor.

In Meteor 3.4 this felt like a workaround, relying on .meteorignore to ignore CSS-like files for entry folders to make Rspack process them. In Meteor 3.4.1 this improved: if you define loaders in rspack.config.js for CSS-like files and import them, Meteor automatically ignores those style files and lets Rspack handle them.

Update:

That said, now that I check, skel-full doesn’t delegate styles to Rspack as other skeleton app does. This app still uses the less package, so we have an opportunity to let Rspack handle it, and, if we agree, even switch to SCSS instead of Less. I can include this minor change in the next Meteor 3.4.1 official release.

1 Like