vue-cli3 global project to introduce less sass files, and use local images in different parts of the rules

The first was introduced in main.js directly declare loader

demo：

import '!style-loader!css-loader!less-loader!./assets/css/common.less'

This allows variable global scope common.less style, but can not use the less be declared in the local vue file

The second use style-resourses-loader this loader, the official website also described, many of which are checked this way:

Installation loader

npm install style-resources-loader -D

In vue.config.js the configuration pluginOptions

as follows:

// 第三方插件配置
pluginOptions: {
"style-resources-loader": {
preProcessor: "less",
patterns: [path.resolve(__dirname, "./src/assets/css/common.less")]
}
}

The project can start, but the style is not loaded, variables can not be used inside, do not know how children

Css 3 arranged in loaderOptions:

The only official document sass examples:

demo

CSS: { 
　　loaderOptions: { 
　　　　Sass: { 
　　　　　　// Sass file path to process 
　　　　　　Data: `@import" ~@/assets/css/common.less " ;` 
　　　　　　} 
　　}

Pro-test can be achieved, and partial introduction of global style vue sass file can use variables defined in the file;

Reference Document https://cli.vuejs.org/zh/guide/css.html#%E5%90%91%E9%A2%84%E5%A4%84%E7%90%86%E5%99%A8 -loader-% E4% BC% A0% E9% 80% 92% E9% 80% 89% E9% A1% B9

If the file is less, you can only define global variables can not be directly introduced into the file:

CSS: { 
　　loaderOptions: { 
　　　　less: { 
　　　　　　// global variable name 
　　　　　　globalVars: { 
　　　　　　　　　　Color1: 'Red'; 
　　　　　　　　} 
　　　　　　} 
　　} 
}

Pro-test can refer to the documentation: http://lesscss.org/usage/#less-options

 

 

 

 

Defined background element in the path problem sass less file:

 background: url("~../assets/logo.png");

If you write directly in the style tag vue file, you can directly opposite path, css files also, less scss documents required in front of the path - coupled with the introduction of local pictures img tag, but also can directly write the relative path a;

Data in data declaration, a local path that has an image, the method requires the introduction of the module:

require('../assets/logo.png')