Passing smaller variables from webpack

Question

I am trying to pass fewer variables in the webpack configuration for a smaller loader, naturally. For some reason, the variable is not passed normally. I can not understand the correct syntax.

The variable has dynamic content, which is determined at build time, in the webpack configuration file. This is the corresponding line (I tried many of its options):

loader: 'style!css?-minimize!less?-minimize&{modifyVars:{"resources-path-prefix":"' + pathPrefix + '"}}' 

In the above example, some pathPrefix is ​​defined at build time, and we want to pass its value to a smaller context, where it will be used in the urls () css directives.

The above does not work - nothing is passed to a smaller one, and the default value of the variable set to a lesser extent is applied.

Can someone show how to properly pass a value to a lesser compilation process? Thanks!

Answer 1

It was hard, but we finally did the job (!). Arggh - so much time was spent trying to figure out the syntax.

Here's the problem: during the build, we want to determine the path that should be used as the base url for different resources in fewer files (background images using the url () less function).

First, we defined the path in the webpack configuration file. Its simple JS, but the escape pattern for the path string was absolutely nutty. We probably invested hours just for that. Awesome . Here he is:

 var assetsPath = (someCondition) ? '/assets' : "\\/127.0.0.1:8080/assets"; 

The following is the bootloader configuration for fewer files using the assetsPath prefix above:

 { test: /\.less$/, exclude: /node_modules/, loader: 'style!css?minimize=false!less?{"modifyVars":{"assetspath":"\'' + assetsPath +'\'"}}' } 

Pay attention to the screening pattern above, where the assetsPath property is used in the bootloader configuration.

Then you need to make sure that an empty variable is defined in fewer files. We initialized it in our 'vars.less' file using:

 @assetspath: ''; 

Finally, in any appropriate class, we can use the value passed during assembly, for example:

 background-image: url("@{assetspath}/images/facebook.png"); 

Answer 2

You can try to use the query section of the loader:

  loader: 'style!css?-minimize!less?-minimize', query: { modifyVars: { "resources-path-prefix": pathPrefix } } 

Answer 3

This is a different approach to this situation, but we managed to get everything working by converting to Base64 every resource loaded with CSS files. We had to do this because finding out the hostname of the resources was possible much later than the line than the webpack configuration file.