欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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各种预处理语言进行了配置加载器,

vue-cli 、webStrom 配置使用less

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”,如下图:
vue-cli 、webStrom 配置使用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 源文件正确编译解析。