Webpack

How to Configure less-loader to Resolve Absolute Import Paths

Provided we have /styles under root, add the following resolve in your webpack config:

const path = require('path')

module.exports = {
  module: {
    rules: [
      {
        test: /\.less$/,
        use: [
          ...
          {
            loader: 'less-loader',
            options: {
              lessOptions: {
                paths: [path.resolve(__dirname)],     <------ here
              },
            },
          },
        ],
      },
    ],
  },
};

Then import with a path prefixed with ~:

@import "~styles/reset.less";

~ allows you to import from a default node_modules plus any number of resolved paths you add into webpack config up there.

Alternatively if you want to import from /src under root, throw in a second parameter, as in:

paths: [path.resolve(__dirname, 'src')]
Standard

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.