第一种直接在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文件中定义的变量;
如果是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')