appeal

IView component library was used in the project development. During the development process, I wanted to customize the iView theme, but after the configuration was completed in accordance with the “variable overwrite” method officially recommended by iView, THERE would be repeated loading of CSS styles, as shown in the figure below:

It is recommended to use style-resources-loader for automatic import of “development environment”. However, you will find that CSS styles will still be repeated after configuration according to the given method. It took a long time to find the problem by comparing the “variable override” tutorial of iView with the automatic import tutorial of Vue CLI:

Find the error

IView’s recommended “variable override” approach looks like this:

In essence, create a less file, import the iView less entry file, overwrite the officially provided overwritable variables, and then reference the custom less file in mian.js instead of referencing the iView less entry file.

Vue CLI provides an automated import tutorial like this:

Essentially in each file (global) import we provide style file (example is. / SRC/styles/imports. The styl ‘file)

Normally, according to Vue CLI official automatic import tutorial configuration can be in the development environment for global import “basic style library”, but I first use the iView official “variable overwrite” method to modify the basic style, The custom LESS file with the iView less entry file command is imported globally as the base style library. This causes the iView style to be imported once for every page globally, causing the CSS style mentioned above to be reloaded.

My misconfiguration was as follows:

The solution

The correct configuration method is to separate the mixed style files into two files: “Global style entry file” and “base style library file” :

The “global style entry file” is used to import the required files (in my case the “iView less entry file” and the “base style library file”); The “base style library” is used to store the basic styles of the project (typically less Sass variables, public functions, and so on);

The modified configuration is as follows:

Note: my “automatic import” part is set by referring to the code path yz-Vue Cli3.0 global import less variable.

The effect is as follows:

reference

  1. Code road bud -Vue Cli3.0 global introduction of less variables
  2. Vue CLI official documents -CSS related – Automatic import