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
$ 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!
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"',
},
},
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With