Less in vue tramping tips

Is the third time to step on this pit, although quickly solved, but still remember.

situation

When Ant Vue is introduced, there is no less, so the terminal prompts you to install the template. I was foolishly direct:

Yarn add less less-loader // NPM install less less-loader --save-dev also worksCopy the code

Results The following error occurred when running the project:

BezierEasingMixin () Inline JavaScript is not enabled. Is it set in your options?Copy the code

So find the reason, is due to the version of less problems. Very speechless.

To solve

The version requirements of less and less-Loader have been checked. After a long search, two versions worked:

Less :3.0.0 or less:3.9.0 // Less :4.1.0 or less: 5.0.0 // Less :3.0.0 or less:3.9.0 // Less :4.1.0 or less: 5.0.0 // Less :3.0.0 or less:3.9.0 //Copy the code

Since I just started my project, I used the following three steps:

First, manually correct the version of less and less-loader in package.json file

Next, delete yarn.lock (if you’re using NPM, delete package.lock.json) and node_modules.

Finally, download Yarn again and it will reconfigure the less plug-in corresponding to your package.json file.

Correct installation:

Yarn add [email protected] yarn add [email protected] or NPM install [email protected] NPM install less-loader5.0.0Copy the code

Less and less-loader must be installed separately.

Don’t forget the point

Since webpack’s default configuration for less-loader is: unsuitable, we need to manually set less-loader to the application state.

For those below vue/cli3, add them to module.rules in webpack configuration, for those below vue/ CLI3, create vue.config.js in project directory

 // vue/cli 2  
 {
       loader: "less-loader",
       options: {
         lessOptions: {
           javascriptEnabled: true,
         },
       },
     },
 
 //  vue/cli 3
 module.exports = {
   css: {
     loaderOptions: {
       less: {
         javascriptEnabled: true
       }
     }
   }
 }
Copy the code

It must be said that the key point is javascriptEnabled: true.

The reason for this is that it may also depend on your version of WebPack.

Less in vue tramping tips