webpack.config.js not setting global less variable

Question

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:

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

and when clicking the link, you should get:

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

Any idea on how to make it work?

Thanks in advance!

Modular

Tried it? link – Jameejamel

any idea on how can I integrate that into my repo? are you able to try? – Modular

Answer 1

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"',
  },
},

Antacid

the file: ./resources/scripts/theme.less doen't exist – Modular

based on your suggestion (which I think cotains a small mistake), I tried something similar with no luck: i.ibb.co/D7wx0z0/image.png. As you can see 1. I removed previous loader, since that didn't work and I was trying to... 2. use text-transform-loader to import the variable value at the beginning of less files, but still getting previous error: Variable @current-vehicle is undefined. Bear in mind that variable: process.env.VEHICLE is defined on .env file (also tried hardcoding its value). Could you maybe try by yourself and post the needed git-diff for this to work? Thanks! – Modular

@Viewsonic, For your first comment: man, I just take the ./resources/scripts/theme.less from your codes in question post. if it doesn't existed, so make it and pass variables init. and test it, it should works. – Antacid

@Viewsonic, for your second. if you add some environment variables inside .env file and got undefined so you should install dotenv package and import it in both webpack and root of your project like: const dotEnv = require('dotenv'); or import dotEnv from 'dotenv' then run it by dotEnv.config();. after this whole the project can understand environment variables. – Antacid

@Viewsonic, Also please do not mix things, the less-loader is needed in any cases, because your CSS making is based on using Less. so you should have it. the text-transform-loader should be add after less-loader object. like this – Antacid

@Viewsonic, try these suggestions and let me know about the result. hope it works, if not inform in here and I will help you with another way. – Antacid

@Viewsonic, I'm glad to helped you ❤️🌹, I upvoted your question too. – Antacid