How to create a separate .less file and use it correctly in iview?

if you want to implement custom .less global styling in iview, first I create a theme directory in src to store less files, and then create index.less, files under theme:

@import "~iview/src/styles/index.less";

// Color
@primary-color          : -sharp41b883;
@info-color             : -sharp1d8ce0;
@success-color          : -sharp41b883;
main.js:
import "./theme/index.less"

but in the end, an error will be reported in run
error reminder:

ERROR  Failed to compile with 1 errors                                                                                                                09:08:28
 error  in ./src/theme/index.less

Module build failed:

premise that I have:

1.npm install iview-loader --save-dev
2.webpack.base.conf.jsresolveextensions.less:
    extensions: [".js", ".vue", ".json",".less"],

is there a mistake in my way? I hope it can help solve

Less less-loader iview vue.js

Sep.16,2021

I can test it your way locally. Post your webpack configuration to see if you have added less less-loader

it should be less-loader

find the problem. If this error occurs, you can try:
may be less's problem, "less": "^ 2.7.3", "less-loader": "^ 4.1.0", reduce less version to below 3.0.

Previous: How to configure proxytable and backend chain in vue-element-admin

Next: How to keep the spaces in the object when js converts strings?