解决html中引入less在浏览器中没有效果的方法

最新推荐文章于 2024-02-05 14:27:03 发布
最新推荐文章于 2024-02-05 14:27:03 发布
阅读量7.8k 收藏 8
点赞数 5
分类专栏： # 01. HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wls666/article/details/89429637
版权

开发工具：vscode

  1. 首先在扩展里下载Live Server这个插件
  2. 然后在vscode中右键点击Open with Live Server

 如下面这个例子：

index.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>
    <!--引入test.less文件 -->
    <link rel="stylesheet/less" type="text/css" href="text.less" />
    <!--引入less.min.js文件 -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.8.1/less.min.js" ></script>
</head>
<body>
    <div class="father">
        <div class="son"> 
        </div>
    </div>
</body>
</html>

 text.less中代码

.fater{
    width: 100px;
    height: 100px;
    background: red;
    .son{
        width: 50px;
        height: 50px;
        background: yellow;
    }
}

然后在vscode中右键点击Open with Live Server

 这样在浏览器中就显示出来：

 

 

 

码路小匠
关注
  • 5
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
less在html页面中应用,Less 在浏览器中使用
weixin_39707612的博客
06-10 1256
Less可以在客户端上运行(IE6+、Webkit、Firefox)，也可以在服务端运行(Node.js、Rhino)。less在浏览器中使用，当你想编译less文件动态地需要而不是在服务器端，这是因为less是一个大的javascript文件。首先，我们需要添加LESS脚本以在浏览器中使用LESS:要在页面上找到样式标签，我们需要在页面上添加以下行。 它还创建带有编译css的样式标签。设置选项...
html无法引入less样式,@import less样式文件 只有css样式生效， less样式却不生效
weixin_39850981的博客
06-16 1528
使用webp享。发概程间告屏会。一控近到都从述序也问ack构建项目时 @import less文件时 为什么只有文件里面css样式生效， less样式却不生支器事的后功发久这含层请间业在屏有随些气和域，实按控幻近持的前时来能过后些的处求也务浏蔽等机站风滚或默现钮制灯近持的前时来效w圈调直年情，量的单框来离理这接法清都的为ebpack.base.co需朋朋支带不新器功几的事上为做的和时意后nf....
monaco-css:摩纳哥编辑器CSS，LESS和SCSS语言支持
05-06
摩纳哥CSS 摩纳哥编辑器CSS语言插件。 编辑CSS，LESS和SCSS文件时，它提供以下功能： 代码完成 悬停 验证：语法错误和掉毛 在同一文件中查找符号的定义，参考和突出显示 文件符号 色彩装饰器 通过API进行配置。 有关CSS插件提供的用于配置CSS / LESS / SCSS语言支持的API，请参见。 CSS插件在内部使用节点模块，提供上述功能的实现。 也使用同一模块来增强CSS，LESS和SCSS编辑体验。 问题 请在有关monaco-css问题。 正在安装 此npm模块捆绑并分发在npm模块中。 发展 npm install . 用npm run compile 用npm run watch npm run prepublishOnly 在您喜欢的浏览器中打开$/monaco-css/test/index.html 。 执照
less页面静态引入方式的使用
最新发布
qq_45089709的博客
02-05 436
首先，需要在你的HTML文档中引入Less.js库。这个JavaScript库能够让浏览器解析Less代码并将其转换为CSS。你可以从Less官方网站下载Less.js，或者使用CDN链接。Less.js允许通过设置全局变量less来配置其行为。这些配置应该在引入Less.js之前完成。在你的HTML文档的部分，使用标签引入Less文件。重要的是要设置rel属性为"stylesheet/less"，这样Less.js就能识别并处理这个文件。在你的项目中创建一个Less文件。
关于在html中直接引入less文件遇到的小问题
weixin_30460489的博客
11-27 3804
由于想直接在html页面上调用less文件，所以直接在代码上直接引入 <script src="bower_components/less/dist/less.js"></script> <link rel="stylesheet" href="less/route.less"> 　结果，控制台显示：Less has finishe...
如何在html中使用less，亲测可用
qietuwang的博客
12-12 918
以前在网页切图的时候，会觉得css如果能有变量 逻辑这些 会很方便，它来了，less.js插件可以使得css有类似变量的语法，它不是很新的技术，习惯用它的人会觉得很好用，而且它可以直接像jquery一样直接在网页上引用，也可以体验，不过仅仅适合体验，这种直接引用的方式不适合正式情况下用，因为页面js会有一个执行的时间，所以看起来会不流畅，可以在环境下开发，然后编译出来。当网页加载时，Less.js会将styles.less文件编译为CSS，并将其替换为标签的href属性中的CSS文件。
html中使用less
SmallGirlYang的博客
11-28 740
说明：在网上看还有一种形式，是在vscode的扩展商店中安装插件Easy LESS，说是可以将less保存后实时编译为css文件，不过该种方式并未进行测试，不能确保可用性。说明：该种方式需要以服务的形式启动，在打开htm时使用less.js编译引用的less文件进行效果的渲染。本地使用less编译为css需要使用两个包。
html文件中less文件为什么不生效呢
weixin_46554787的博客
05-24 918
这个问题应该这样百度：vscode中怎么下载less插件以及如何使用 1、在vscode中下载Less插件 2、文件——首选项——设置——用户中搜索settin.json 3、在这个文件夹中添加这段代码 4、最后重启即可 ...
html引入less预编译器无效
hsdsnd的博客
11-20 909
html引入less预编译器，样式不生效
Less
qq_38105960的博客
09-29 269
什么是Less？ css的预处理语言，LESS 包含一套自定义的语法及一个解析器，用户根据这些语法定义自己的样式规则，这些规则最终会通过解析器，编译生成对应的 CSS 文件。 html中引用 ①link引用.less文件 type = “type/less”,引用less.js插件,不建议使用 ess.js 解析less文件动态加载head，异步加载less文件。 <link rel="s...
在浏览器环境使用 less 不生效？anywhere!
weixin_44589540的博客
05-12 987
在浏览器环境使用 less 参考链接—— less 快速入门 在你的 html 文件的 <head> 中引入 less ，将 styles.less 替换为你自己的文件名即可。 <link rel="stylesheet/less" href="styles.less" /> <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script> 之后你是不是双
Bootstrap CSS使用方法
11-30
Bootstrap中CSS的使用方法，供大家参考，具体内容如下 1、GitHub上这样介绍 bootstrap： :ballot_box_with_check: 简单灵活可用于架构流行的用户界面和交互接口的html、css、javascript工具集。 :ballot_box_with_...
webpack4 的配置方法，代码 加 mackdown笔记，超详细 以及编译打包出现问题解决 各种 loader 使用说明 以及描述
04-10
6.WebPack 编译打包： ... 方法一 使用 页面引入 script 方式引用Bootstrap: 方法二 使用 安装 loader 处理 字体 15.处理 ES6、ES7 更高级的新语法 的第三方 loader 工具 16.处理 VUE 后缀名的第三方 loader 等等
static-html-builder:hayaoweb项目
05-22
自动引入 *.js 与 *.less，无需手动维护 生成 less source map 文件，方便调试页面 自动加入闭包，避免全局命名空间污染 支持 ngAnnotate 语法 安装方法 安装之前确保已经有 git 和 node.js 环境。node.js 需要 ...
static-html-builder:Angular SPA生成器
04-28
自动引入 *.js 与 *.less，无需手动维护 生成 less source map 文件，方便调试页面 自动加入闭包，避免全局命名空间污染 支持 ngAnnotate 语法 安装方法 安装之前确保已经有 git 和 node.js 环境。node.js 需要 ...
基于 webpack2 实现的多入口项目脚手架详解
01-21
主要使用 extract-text-webpack-plugin 实现 js 、css 公共代码提取，html-webpack-plugin 实现 html 多入口，less-loader 实现 less 编译，postcss-loader 配置 autoprefixer 实现自动添加浏览器兼容前缀，...
JS之预编译(详解)
wls.ink
03-28 2124
JS运动过程： 语法分析 预编译 解释执行 语法分析就是JS引擎去检查你的代码是否有语法错误，解释执行顾名思义就是执行你的代码。当然最重要的还是预编译，那么预编译是在什么时候开始发生呢？，接下来就是重点了。 首先要明白什么是函数声明?,什么是变量赋值？ function a() //函数声明 var a = function (){}//变量赋值（函数表达式） 预编译（函数执行的前一刻）： ...
js文件中发送ajax请求,ulr路径不起作用的解决办法
wls.ink
09-30 1988
前言: 在写Python项目的时候,单独的js文件发送ajax请求,并不起效果并且提示路径错误 错误原因分析: {% url 'myadmin_updategoodsgrade' %} # 是模板中的标签 # 当解析输出到浏览器中的html,会把url解析成实际的url地址 # 而在js文件中没有解析的过程,所以url并不会替换 解决办法: index.html文件内容: <!DO...
vue中的style引入less文件
06-28
### 回答1： 在Vue中可以通过引入Less文件来使用Less的样式。可以通过在组件中的<style>标签中使用@import指令来引入Less文件，并且在模板中使用定义的样式类。同时需要安装Less的依赖：npm install less-loader less。 ### 回答2： 在Vue中引入less文件的方式与常规的CSS文件引入方式类似。Vue提供了多种方式来引入less文件，以下是两种常见的方式： 1. 在单文件组件中引入less文件 在单文件组件的<style>标签中，使用@import语句引入需要的less文件。例如，如果我们想要在组件中引入一个名为“styles.less”的文件，可以在<style>标签中这样写： ``` <style lang="less"> @import 'styles.less'; </style> ``` 这样，编译器就会将这个less文件编译成CSS文件，并作为样式应用于组件中。 2. 使用vue-loader-plugin启用less解析器 在Vue中，可以通过使用vue-loader-plugin来启用less解析器，从而实现less文件的引入。在安装vue-loader-plugin插件后，可以在webpack配置文件中加入以下代码来启用less解析器： ``` { test: /\.less$/, loader: "vue-style-loader!css-loader!less-loader" } ``` 这样，可以简化less文件的引入，无需在<style>标签内使用@import语句了，只需要在模板中引用即可： ``` <template> <div class="box"> <p>这是一个样式测试。</p> </div> </template> <style lang="less"> .box { background: #fff; padding: 20px; } </style> ``` 总之，无论是哪种方式，我们都可以轻松地在Vue项目中使用less文件进行样式编写，从而提高开发效率和代码质量。 ### 回答3： 在vue中，我们可以使用style标签来引入css样式文件。然而，如果我们想使用less来编写样式文件，该如何操作呢？ 首先，我们需要安装less预处理器。在终端输入以下命令即可： ``` npm install less less-loader --save-dev ``` 然后，在.vue文件中的style标签中，我们需要将lang属性值设为"less"，同时在style标签内使用@import语句引入我们编写好的.less文件。例如： ``` <style lang="less"> @import "@/assets/less/style.less"; </style> ``` 注意，这里我们使用了@符号来代表项目根目录，这是因为我们在webpack中配置了别名。如果没有设置别名，请用相对路径来引入文件。 最后，我们需要在配置文件中进行相应的配置，使得webpack能够正确地解析.less文件。在webpack.config.js中添加以下代码： ``` { test: /\.less$/i, use: [ 'style-loader', 'css-loader', 'less-loader' ], } ``` 这个代码块表示，当遇到.less文件时，首先使用less-loader将其转换为css文件，然后使用css-loader将其解析为css模块并引入到js文件中，最后使用style-loader将其插入到html文件中的style标签内。 完成以上步骤之后，我们就可以愉快地使用less来编写样式文件啦！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值