vue-cli 、webStrom 配置使用less
程序员文章站
2022-07-03 14:12:59
...
1、先安装less，less-loader
npm install less less-loader --save-dev会在package.json中看到：
"less": "^3.0.2",
"less-loader": "^4.1.0"（也可以手动加入到package.json中），之后不用配置就可以在项目中用less了，因为在webpack配置中有utils.js对css各种预处理语言进行了配置加载器，
在build文件夹中的webpackage.base.conf.js中配置：
{
test:/\.less$/,
loader:'less-loader'
}在style标签中的属性设置为lang=‘less’即可使用·
<style lang="less" scoped>
@blue: #5B83AD;
.bordered {
border-top: dotted 2px black;
border-bottom: dotted 2px black;
}
.hello {
color: @blue;
.bordered;
h2 {
color: blue;
}
}
</style>2、配置webStrom的less设置
启动webStrom,进入 文件（File）-设置（Settings），在“IDE Settings”里面找到 外部工具（External Tools），
点击“+”，选择“less”，如下图：
点击“OK”，确定即可。
3、客户端使用less
在你的项目中引入LESS很简单：
1.下载less.js，
2.创建一个文件来放你的样式，比如style.less;
3.添加以下代码到你的HTML的<head>中:
<link rel="stylesheet/less" type="text/css" href="styles.less">
<script src="less.js" type="text/javascript"></script>需要设置参数，在 <script src="less.js"></script> 之前 定义全局的 less 对象就可以为 Less.js 设置参数：
<!-- set options before less.js script -->
<script>
less = {
env: "development",
async: false,
fileAsync: false,
poll: 1000,
functions: {},
dumpLineNumbers: "comments",
relativeUrls: false,
rootpath: ":/a.com/"
};
</script>
<script src="less.js" type="text/javascript"></script>还可以用Less CDN 加速
<script src="http://cdn.bootcss.com/less.js/1.7.0/less.min.js"></script>ps：在引入 .less 文件时，rel 属性要设置为“stylesheet/less”。还有更重要的一点需要注意的是：LESS 源文件一定要在 less.js 引入之前引入，这样才能保证 LESS 源文件正确编译解析。
下一篇： centos虚拟机配置静态ip
推荐阅读