[SOLVED] How to enable less with Meteor 3.4 / rspack?

help
1

Still having trouble with it in my real app but got a proof of concept working in a skeleton typescript/react app from meteor create and it turned out to be pretty straight-forward:

First install the required npm packages:
meteor npm install --save-dev less less-loader

Then modify rspack.config.ts:

import { defineConfig } from "@meteorjs/rspack";
import { TsCheckerRspackPlugin } from "ts-checker-rspack-plugin";

export default defineConfig((/* Meteor */) => {
  return {
    plugins: [new TsCheckerRspackPlugin()],
    module: {
      rules: [
        {
          test: /\.less$/,
          use: [
            {
              loader: 'less-loader',
            },
          ],
          type: 'css',
        },
      ],
    },
  };
});

Source:

2

“less” is life! :raised_hands:

What I have also added is autoprefixer (which is configured through postcss-loader):

rspack.config.js:

       module: {
         rules: [{
           test: /\.vue$/,
           loader: 'vue-loader',
           options: {
             experimentalInlineMatchResource: true,
           },
         },{
           test: /\.less$/,
           use: ['postcss-loader','less-loader'],
           type: 'css/auto',
         }],
       },

postscss.config.js:

const autoprefixer = require('autoprefixer')

module.exports = {
  plugins: [
    autoprefixer()
  ]
}
3

For those looking for more Rspack tips, I stumbled upon this great page in the Meteor docs: Rspack Bundler Integration | Docs

1 Like
4

I think the correct way to use autoprefixer is to have it under the rules:

 {
        test: /\.less$/i,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [autoprefixer()]
              }
            }
          },
          'less-loader'
        ]
      },