vue中 如何使用less

标签：htm   css   index   --   全局   配置   pack   bpa   import   

首先肯定是vue-cli全部就位：

1，安装依赖：

　　npm install less less-loader --save

2，修改build-webpack.base.config.js文件，配置loader加载依赖，让其支持外部的less,在原来的代码上添加（配置less）

　　{

　　　　test: /\.less$/,

　　　　loader: ‘style-loader!css-loader!less-loader‘

　　}

　　现在基本上已经安装完成了，然后再使用的时候在style标签里面加上lang="less"，就可以写less的代码了（style标签里面加上scoped的为只在此作用域有效）

　　或者：

　　@import‘./index.less‘ //引入全局less文件

　　html中直接引入：

　　<link rel=‘stylesheet/less‘ type=‘text/css‘ href=‘文件路径/style.less‘>

　　<script src="文件路径/less.js" type=‘text/javascript‘></script>

html中直接引入：

<link rel="stylesheet/less" type="text/css" href="文件路径/styles.less">
<script src="文件路径/less.js" type="text/javascript"></script>

)

vue中 如何使用less

标签：htm   css   index   --   全局   配置   pack   bpa   import   

原文地址：https://www.cnblogs.com/tanxiang6690/p/9496424.html