Import global variables in less-loader

Question

In my webpack config, I want to be able to define a global less-variables file which would be included in every less component.

With the sass-loader you can supply the following option:

loaderOptions: {
    data: "@import 'globals.sass'"
}

The only option I could find with the less-loader is globalVars:

loaderOptions: {
    globalVars: {}
}

Now, this works all right, but globalVars expects an object with key-value pair. I'd rather have a theme.less somewhere which is appended with every component. Is this possible with the less-loader?

score 4 · Accepted Answer · answered Feb 06 '19 at 01:13

I suggest chaining your less-loader with the text-transform-loader, like this:

rules: [{
     test: /\.js$/,
     use: [
         { 
            loader: 'less-loader',
            options: //your normal options
         },
         { 
            loader: 'text-transform-loader',
            options: {
               prependText: '@import "../styles/theme.less"'
            }
         }
     ]
}]

Remember that the last webpack loader is applied first, so you probably want to use this one as the last loader in your chain. This may well break if your less files are nested at different depths, because then your theme file will be at different depths relative to each one. If that's the case, you could just append the entire content of the theme file to each less file!

Would also be a good idea to exclude your theme.less file from this rule, otherwise you could get some weird infinite recursion.

See https://github.com/kmck/webpack-text-transform-loader for details.

score 1 · Answer 2 · edited Mar 09 '22 at 01:51

There are two ways to do that under less options:

additionalData

additionalData: (content, loaderContext) => {
     return `@import '~@/global.less';${content}`
}

lessOptions

lessOptions: {
     modifyVars: {
          // you should config resolve alias option for @
          [any key name you like]: `true;@import'~@/global.less';`,
     },
}

They are the same results and principles, except additionalData can prepend or append, while modifyVars can only append. More details can be found in less-loader source code.

score 0 · Answer 3 · answered Feb 26 '19 at 18:44

That is the way I do:

rules: [{
    test: /\.less$/,
    use: [{
        loader: 'less-loader',
        options: {
            javascriptEnabled: true
        }
    },
        {
            loader: 'style-resources-loader',
            options: {
                patterns: [
                    path.resolve(__dirname, 'src/application/less/variables.less'),
                    path.resolve(__dirname, 'src/application/less/flex.less'),
                    path.resolve(__dirname, 'src/application/less/functions.less'),
                ]
            }
        }]
}]

Import global variables in less-loader

3 Answers3

Linked