Vue's dig pits and crawl pits CSS background graphic style Ultimate solution

Original Problem

#wrapper {        width:100%;         height:100%;         position:fixed;         background-image:url (./img/open_bg.jpg)    }

In the CSS style in the. vue file, use the background map

After Webpack packing, the path is wrong, how to do?

Reply

If you use Vue-cil, then in the build directory to find the utils.js in the Extracttextplugin.extract ({}), add the following this attribute is the perfect solution to Publicpath: '. /.. /‘

Explain

The file will eventually be packaged and compressed to JS. When running, the relative path in the CSS points to the root directory that has changed, so there is an issue with the loading error.

Here is an explanation of this plugin.

Extract-text-webpack-plugin

Role: The main purpose of this plugin is to pull away from CSS style, to prevent the style of packaging in JS caused by the page style loading confusion phenomenon.

Plug-in Parameters: the plug-in has three parameters of the following meanings:

Use: Refers to what kind of loader to compile the file, here because the source file is. css so choose Css-loader
Fallback: What loader to use to extract CSS files after compilation
Publicfile: The file path that is used to overwrite the project path and generate the CSS file

Source

https://www.zhihu.com/question/39953434

Vue's dig pits and crawl pits CSS background graphic style Ultimate solution