解决在Chrome和Firefox浏览器引入less.js不能解析less文件

最新推荐文章于 2023-01-04 15:34:03 发布

Q183cm

最新推荐文章于 2023-01-04 15:34:03 发布

阅读量1.6k

点赞数 5

分类专栏： CSS 文章标签： less.js

本文链接：https://blog.csdn.net/qq_41511151/article/details/102011219

版权

CSS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

报错情况如下

1、新建test.less文件

@charset "utf-8";
body{
	background: pink;
}

2、新建html测试文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<link rel="stylesheet" type="text/less" href="less/test.less">
	<script src="assets/less/less.min.js"></script>
</head>
<body>
	
</body>
</html>

一定要记得引入这两个文件呀！！！！

还有就是在引入less文件的时候，要声明 type=“text/less”

<link rel="stylesheet" type="text/less" href="less/test.less">
<script src="assets/less/less.min.js"></script>

在浏览器打开，这里我列举三种不同的浏览器

Chrome浏览器（没有效果，报错）
Firefox （同样是报错）
IE（终于有效果了）

可以看到，只有IE浏览器成功解析了less文件

解决办法

1、在vscode中下载Live Server 插件

在这里插入图片描述

2、之后你会发现右键html文件会多出一个open with Live Server的选项

在这里插入图片描述

3、没错，点击这个，你会发现，在Chrome浏览器中，成功解析

在这里插入图片描述

火狐浏览器中也是可以的

在这里插入图片描述

Q183cm

关注

5
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
解决在Chrome和Firefox浏览器引入less.js不能解析less文件

报错情况如下1、新建test.less文件@charset "utf-8";body{ background: pink;}2、新建html测试文件<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" cont...
复制链接

扫一扫

专栏目录