引用less样式后控制台报错解决方法

引用方式：

1.npm全局安装less：

npm install less -g --save

2.创建 main.less 文件，复制内容如下：

// main.less
@width: 100%;
@height: 100px;
@color: red;

.container{
   width: @width;
   height: @height;
   background-color: @color;
   margin-bottom: 5px;
 }

.container2{
  width: @width;
  height: @height;
  background-color: @color;
  margin-bottom: 5px;
}

.container3{
  width: @width;
  height: @height;
  background-color: @color;
  margin-bottom: 5px;
}

3.将 main.less 转换为 main.css，运行一条命令自动完成转换:

lessc main.less main.css  

4.重启webstrom可以看到生成了一个main.css文件

5.在index.html文件中引用:

<link rel="stylesheet" href="<%= BASE_URL %>../src/main.less/main.css">

这时候控制台报错：

解决方式：

在引用的时候去掉rel="stylesheet"：

<link href="<%= BASE_URL %>../src/main.less/main.css">