【less】项目工程化（@import）

微信订阅号：Rabbit_svip

关键词： @import ‘ less路劲 ‘

一个项目，通常会有固定的版心，确定的主题色和辅色。

在 less 里，习惯把这些固定的常量都存到一个公共的 less 文件里。
哪个地方需要用到主题色，哪个地方需要用版心尺寸布局，就直接调用这个公共的 less 文件。

【第1步】新建一个公共 less 文件 —— pub.less

@bgc: #ff6600; // 背景色
@mc: #c8ff00; // 主题色@area: 980px; // 版心

【第2步】新建其他 less 文件（这里我新建了一个 index.less），并通过 @import 调用 pub.less

@import 'pub';body {width: 100%;background: @bgc;
}div {width: @area;margin: 0 auto;background: @mc;
}

注意：@import 后面放的是 pub.less
可以写成 @import ‘pub.less’
也可以忽略文件后缀 @import ‘pub’

【第3步】编译所有 less 文件，查看转换出来的 css 文件。

转换后的 index.css

body {width: 100%;background: #ff6600;
}div {width: 980px;margin: 0 auto;background: #c8ff00;
}

可以看到，转换后的 body 里面，背景色是用 pub.less 设置的 @bgc。
div 里面，width 是 pub.less 设置的 @area。

div 的背景色，是用 pub.less 设置的 @mc。

2种编译 less 的方法：
【less】用koala编译
【less】命令行编译

【less】项目工程化（@import）相关推荐

Vite、Pinia 新一代项目工程化
一.什么是 Vite.js ? 1.什么是 Vite? 中文官网地址 Vite 是 Vue 的作者尤雨溪开发的 Web 开发构建工具,它是一个基于浏览器原生ES模块导入的开发服务器,在开发环境下,利用 ...
Visual Studio容器项目工程化心得
引言关注博主的网友会看到我使用ASP.NET Core 容器化部署企业级项目的过程, 回想到开发过程中,鄙人有一些工程化心得, 分享给同学们. 项目工程化因为本项目涉及单元测试Project.容器 ...
后端代码之服务端 - 项目工程化创建目录启动服务 -讲解篇
文章目录前言一. 目录创建与应用启动 A. 步骤如下: B. 具体cmd命令执行流,截图如下:(`部分无效,可忽略`) 二. 查看Express的欢迎页 1. 查看欢迎页的浏览器url地址: ...
Nuxt项目支持import写法的最新解决方案
Nuxt项目支持import写法的最新解决方案参考文章: (1)Nuxt项目支持import写法的最新解决方案 (2)https://www.cnblogs.com/sese/p/11976250. ...
vue+ts项目中import图片时报错Cannot find module ‘xxx‘ or its corresponding type declarations
TS项目中import图片时报错Cannot find module 'xxx' or its corresponding type declarations 在vue+ts项目中使用import的形 ...
css引入报错,vue项目通过import引入外部css报错怎么办
vue项目通过import引入外部css报错的解决办法:首先在[webpack.config.js]中添加相关内容,添加后重新npm run dev:然后json文件中查看是否存在[css-loade ...
typescript项目中import 图片时报错：TS2307: Cannot find module ‘...’
最近在用typescript写项目时,我用import来加载一个图片,webpack编译文件是会报错如下: 报错: 解决: 如果在js中引入本地静态资源图片时使用import img from './ ...
Eclipse中导入项目（Import）出错解决方法
Eclipse导入项目出错问题:各种库的引入出现错误. 原因:原作者对工程的配置与我们不相同错误界面: 1. 看Libraries树结构,看JRE是否配置正确看来JRE没有出现问题. 2. 看S ...
IntelliJ IDEA中打开项目时用 Import Project（导入项目）和 Open（打开项目）的区别
文章目录创建测试目录使用 Open 方式打开用 Import Project 方式打开用 Open 方式打开文件夹下的多个项目用 Import Project 的方式打开多个项目总结对于 ...

【less】项目工程化（@import）

【less】项目工程化（@import）相关推荐

最新文章

热门文章

【less】项目工程化 （@import）

【less】项目工程化 （@import）相关推荐

最新文章

热门文章

【less】项目工程化（@import）

【less】项目工程化（@import）相关推荐