[Feature] support {String|Function} input for hot reloading (options.modifyVars)

[stackjie]

webpack config

{
  test: /\.less$/,
  loader: 'less-loader',
  options: {
     modifyVars: theme
   }
}

theme.js

module.exports = {
  '@primary-color ': '#4578c8',
  '@info-color': '#049df8',
  '@success-color': '#6ccb24',
  '@warning-color': '#ffb619',
  '@error-color': '#f30416',
  '@input-bg': '#fbfdfc',
  '@table-thead-bg': '@input-bg'
}

every change in theme.js I have to restart the server npm run😆，how to hot reload?
thanks

[michael-ciniawsky]

You can try for watch mode at least

webpack.config.js

{
   test: /\.less$/,
   use: [
      {
         loader: 'less-loader', 
         options: (loader) => {
             loader.addDependency('path/to/theme')

             return {
                modifyVars: theme
             }
         }
      }
   ]
}

But I'm not 💯, if it works with less-loader, this may require a PR to accept a {Function} for modifyVars

webpack.config.js

{
   test: /\.less$/,
   use: [
      {
         loader: 'less-loader', 
         options: {
           ident: 'less',
           modifyVars: (loader) => {
             loader.addDependency('path/to/theme')
            
             return require('path/to/theme')
           }
        }
      }
   ]
}

[stackjie]

@michael-ciniawsky Seems to not accept the Function for options?

error info

    throw new WebpackOptionsValidationError(webpackOptionsValidationErrors);
                ^

WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration.module.rules[8].use should be one of these:
   non-empty string | function | object { loader?, options?, query? } | function | [non-empty string | function | object { loader?, options?, query? }]

my configuration by vue-cli webpack template
vuejs-templates/webpack

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: (loader) => {
          loader.addDependency('../src/styles/theme/esf')
          return Object.assign({}, loaderOptions, {
            sourceMap: options.sourceMap,
            modifyVars: theme
          })
        }
        // options: Object.assign({}, loaderOptions, {
        //   sourceMap: options.sourceMap,
        //   modifyVars: theme
        // })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

[michael-ciniawsky]

Yeah, that's what I meant with 'maybe' 😞, we need to accept a {Function} for modifyVars and handle it inside the loader. If you want to go for it feel free to open a PR and I will help if needed, otherwise I will tackle it when time

[stackjie]

@michael-ciniawsky ok，thanks😁

[tim-soft]

Anything I can do to help make this a reality?
Designing themes via less loader's modifyVars is pretty painful without HMR support

[ghost]

Any news on this PR please ?

[Aka4Code]

@michael-ciniawsky Do you plan to add hot reloading here?

[alexander-akait]

PR welcome

[alexander-akait]

We implement prependData in next major release, it is same as modifyVars and it is support Function

[ButuzGOL]

Is there any information how can it be achieved ?
Currently to see my changes i need to restart server which takes time

[alexander-akait]

https://github.com/webpack-contrib/less-loader#additionaldata

[ButuzGOL]

This helped me
#303 (comment)
but anyway not so fast as with less variant