node.jsreactjswebpacklaravel-mixless-loader

webpack.config.js not setting global less variable

Any idea of why this webpack.config.js is not setting the global LESS variable: current-vehicle defined on: /resources/scripts/theme.js?

/webpack.config.js

const merge = require("webpack-merge");
const path = require("path");
const baseConfig = require("laravel-mix/setup/webpack.config");

require('dotenv').config();

/**
 * Update the output directory and chunk filenames to work as expected.
 *
 * @param {object} config - The webpack config
 *
 * @return {object} The updated webpack config
 */
const addOutputConfiguration = config => {
  const publicPath = process.env.CDN_URL + '/js/';
  return merge(config, {
    output: {
      path: path.resolve(__dirname, "public/cdn/js"),
      publicPath,
      chunkFilename: "[name].js"
    },
    module: {
      loaders: [
        {
          loader: 'less-loader',
          options: {
            modifyVars: require("./resources/scripts/theme")
          }
        },
      ],
    },
  });
};

module.exports = addOutputConfiguration(baseConfig);

Here you have the full repo: https://github.com/tlg-265/issue-import-less.local

Setup

$ git clone https://github.com/tlg-265/issue-import-less.local
$ cd issue-import-less.local
$ npm i
$ npm run watch

Then open with the browser (you do NOT need a server).

That LESS variable: current-vehicle is read here:

https://github.com/tlg-265/issue-import-less.local/blob/master/resources/assets/js/components/controls/ModalWindow/ModalWindow.less#L1

When you do: $ npm run watch, you get the error: Variable @current-vehicle is undefined, as you can see on the screenshot below:

enter image description here

Ideally, when you run it, you should get the following on the browser:

enter image description here

and when clicking the link, you should get:

enter image description here

but unfortunatelly I haven't been able to arrive there yet.

Any idea on how to make it work?

Thanks in advance!

Solution

  • This part of your configuration shocked me:

        module: {
      loaders: [ // <==== !!!!!! here
        {
          loader: 'less-loader',
          options: {
            modifyVars: require("./resources/scripts/theme")
          }
        },
      ],
    },

    I remember the loaders key was for Webpack version 1 or 2, after version 3 they highly recommended use rules, please change it to rules and try it. I don't know, maybe it comes from Laravel webpack configuration.

    Any way, after less-loader please add this loader too:

    { 
  loader: 'text-transform-loader',
  options: {
    prependText: '@import "./resources/scripts/theme.less"',
  },
},