浏览器中使用Less

叁歲伎倆 2024-03-30 14:33 52阅读 0赞

我们都知道less无法在浏览器中直接使用，浏览器不能直接对其识别

那我就是想在浏览器中使用less呢？应该怎么做？

### 解决 ###

> 通过less解析插件less.js（JavaScript插件）把less文件解析成css代码

1.去 [下载地址][Link 1] 下载 `dist`包下 `js` 文件并引入自己的项目中

2.less 样式文件一定要在 Less.js之前引入，这样才能保证 .less 文件被正确编译。

#### html ####

<!DOCTYPE html>
        <html>
            <head>
                <meta charset="UTF-8">
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width, initial-scale=1.0">
                <title>Document</title>
                <link rel="stylesheet/less" type="text/css" href="../css/less.css" />
                //引入less.js文件
                <script src="../js/less.js"></script>
            </head>
            <body>
                hello,less
            </body>
        </html>

#### less ####

@charset "utf-8";
        @baseColor: pink;
        @fontSize: 30px;
        
        * {
        
            margin: 0;
            padding: 0;
        }
        
        body,
        html {
        
            width: 100%;
            height: 100%;
            background-color: @baseColor;
            display: grid;
            justify-content: center;
            align-content: center;
            font-size: @fontSize;
        }
        ```

[Link 1]: https://github.com/less/less.js

发表评论取消回复

表情：

评论列表（有 0 条评论，52人围观）

还没有评论，来说两句吧...

相关阅读

相关浏览器中使用Less

我们都知道less无法在浏览器中直接使用，浏览器不能直接对其识别那我就是想在浏览器中使用less呢？应该怎么做？解决 > 通过less解析插件less.js（Ja

叁歲伎倆/ 2024年03月30日 14:33/ 0 赞/ 53 阅读

相关在react项目中使用less

在react项目中使用less 1. 安装依赖包：cnpm i --save-dev less less-loader （less 、less-loader两个包） 2

迷南。/ 2023年06月12日 09:27/ 0 赞/ 66 阅读

相关 less中使用calc并兼容

使用环境移动端三栏布局中主体（黄色）部分固定自适应手机大小，使用less编写css样式，由于calc的移动端适应性比较差，需处理兼容。 ![项目图][waterma

拼搏现实的明天。/ 2022年12月10日 01:20/ 0 赞/ 165 阅读

相关 vscode中使用less编译wxss

> 设置中打开settings.json加入： > > "less.compile": \{ > > "outExt":".wxss" > > \} > > 之后记得重

亦凉/ 2022年10月24日 01:54/ 0 赞/ 173 阅读

相关 less使用

less的特点：大体上语法同css，但是支持变量，嵌套等特殊用法，使用起来也更方便。 less不能直接运行在浏览器上，得通过转换为css代码，采用用于浏览器

曾经终败给现在/ 2022年09月04日 11:42/ 0 赞/ 188 阅读

相关 vue中使用Less全局变量

1、安装` `sass-resources-loader，安装less npm install sass-resources-loader --sav

Love The Way You Lie/ 2022年05月20日 10:26/ 0 赞/ 376 阅读

相关 vue中使用less

vue中使用less > 首先vue开发环境已经安装成功当所有东西都准备好之后：第一步：安装less依赖，`npm install less less-l

怼烎@/ 2022年04月08日 13:19/ 0 赞/ 376 阅读

相关浏览器端使用less

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。 Less 可以运行在 Node 或浏览器端。

拼搏现实的明天。/ 2021年10月19日 03:56/ 0 赞/ 421 阅读

相关浏览器端使用less

文章目录官网地址下载使用官网地址 [http://lesscss.cn/][http_les

素颜马尾好姑娘i/ 2021年09月23日 09:08/ 0 赞/ 325 阅读

相关如何在vue中使用less

转自：http://blog.csdn.net/lyt\_angularjs/article/details/76241626 仅用于学习，不可商用！初始环境

客官°小女子只卖身不卖艺/ 2021年09月15日 00:22/ 0 赞/ 510 阅读