vue-cli3项目中全局引入less sass文件 以及使用本地图片在不同地方规则

第一种直接在main.js中引入，需要声明loader

demo：

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

这样可以实现common.less样式的全局作用域，但是不能在局部vue文件中使用less中声明的变量

第二种使用style-resourses-loader这个loader，官网上也有说明，查了很多都是这种方法：

安装loader

npm install style-resources-loader -D

在vue.config.js中配置pluginOptions

如下：

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

项目可以启动但是样式没有加载，里面的变量也不能使用，不知道怎么回事儿

3 配置css中的loaderOptions：

官方文档上只有sass的例子：

demo

css:{
　　loaderOptions:{
　　　　sass:{
　　　　　　//要处理的sass文件路径
　　　　　　data:`@import "~@/assets/css/common.less";`
　　　　　　}
　　}

亲测可以，实现全局样式引入以及局部vue文件中可以使用sass文件中定义的变量；

参考文档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

如果是less文件，则只能定义全局变量，不能直接引入文件：

css:{
　　loaderOptions:{
　　　　less:{
　　　　　　//全局变量名
　　　　　　globalVars:{
　　　　　　　　　　color1:'red';
　　　　　　　　}
　　　　　　}
　　}
}

亲测可以参考文档：http://lesscss.org/usage/#less-options

在sass less文件中定义元素的背景图路径问题：

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

如果直接写在vue文件的style标签中，直接相对路径就可以，css文件中也是，less scss文件中需要在路径前面加上~，在img标签中引入本地的图片，也直接写相对路径就可以了；

在data中声明数据，有图片的本地路径，需要使用模块引入的方法：

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