Converting LESS files to CSS modules

Question

I am trying to convert a legacy codebase of LESS files to CSS modules.

I updated the webpack's css-loader to look like this:

{
  loader: 'css-loader',
  options: {
    modules: {
      // for now, only enable CSS modules for LESS files with ".module."
      auto: /\.module\.\w+$/i, 
      localIdentName: '[sha1:hash:hex:6]',
    },
  },
}

Then, I renamed a LESS file from something.less to something.module.less

All the class names in our codebase are kebab cased and while CSS Modules prefers using camelCase, you can still access it by doing styles['some-class-name'].

My problem is that the client-side application isn't even building. It keeps complaining about unexpected tokens on a line like: .user-profile-wrapper { // styles here }

So I shouldn't have to change anything about the LESS file but fine, let's just remove the kebab casing.

Then, when I change it to just be .wrapper { // styles here } the client-side application builds successfully but now our node server is giving unexpected token '.' build errors on the dot that is in front of the .wrapper {}.

/path/to/app/styles/home/something.module.less:1
.wrapper {
^

SyntaxError: Unexpected token '.'
    at wrapSafe (node:internal/modules/cjs/loader:1378:20)
    at Module._compile (node:internal/modules/cjs/loader:1428:41)
    at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
    at Object.newLoader [as .js] (/path/to/app/node_modules/pirates/lib/index.js:121:7)
    at Module.load (node:internal/modules/cjs/loader:1288:32)
    at Function.Module._load (node:internal/modules/cjs/loader:1104:12)
    at Module.require (node:internal/modules/cjs/loader:1311:19)
    at require (node:internal/modules/helpers:179:18)
    at Object.<anonymous> (/path/to/app/components/home/MyComponent.tsx:6:1)
    at Module._compile (node:internal/modules/cjs/loader:1469:14)

Does anyone know what could be wrong?

biodiscus · Accepted Answer · 2025-01-14 09:08:21Z

0

In the example config you provided there is missing the less-loader. To compile LESS files to CSS is required the additional less-loader.

Install less-loader:

npm install less less-loader --save-dev

Add the less-loader to your webpack config:

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/i,
        use: [
          {
            loader: "css-loader",
            options: {},
          },
          {
            loader: "less-loader", // <= compiles Less to CSS
            options: {},
          },
        ],
      },
    ],
  },
};

answered Jan 14 at 9:08

biodiscus

9358 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Converting LESS files to CSS modules

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related