如何通过Less引入外部CSS文件并进行编译？-css教程-PHP中文网

不能直接@import ".css"文件而不被编译，必须用@import (css) "file.css"强制原样输出为@import url()，否则less会将其当less源码解析导致报错。

如何通过less引入外部css文件并进行编译？

Less 能不能直接 @import 一个 .css 文件？

可以，但默认行为不是你想要的“把 CSS 当 Less 编译”，而是原样 @import 进去——也就是生成一条 @import url("xxx.css") 的 CSS 规则。如果你写的是 @import "reset.css";，Less 编译后不会解析它的内容，只当它是外部资源。

真正想“把外部 CSS 当 Less 源码读进来、参与变量/嵌套/混合等编译”，得加 .less 后缀或显式声明类型：

@import "reset.css"; → 输出 @import url("reset.css");
@import (less) "reset.css"; → 把 reset.css 当 Less 源文件读取（要求内容实际是合法 Less/CSS）
@import "reset.less"; → 自动按 Less 解析（推荐方式，语义明确）

为什么 `@import (less)` 有时会报错？

常见报错如 ParseError: Unexpected input 或 variable @color is undefined，本质是外部 CSS 文件里混了浏览器能吃但 Less 解析器不认的语法，比如：

CSS 自定义属性（--main-color）没被转义或包裹在 @plugin 里
媒体查询里用了 and (hover: hover) 这类带括号的布尔表达式，Less 旧版本会误判为函数调用
源文件开头有 UTF-8 BOM 字节（尤其 Windows 编辑器保存时默认加），Less 解析器卡在第一个字符

解决办法：用编辑器检查并移除 BOM；把可疑 CSS 片段包进 {} 或改用 @import (inline) 避开解析（但失去变量穿透能力）。

如何让外部 CSS 中的变量在当前 Less 文件里可用？

Less 的变量作用域是“从上到下、就近合并”，只要 @import 语句出现在使用变量之前，且导入的是 (less) 类型，变量就自动生效。但要注意顺序和命名冲突：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

导入必须写在变量首次引用之前（哪怕中间隔了注释也不行）
如果两个 @import (less) 文件都定义了 @primary-color，后导入的会覆盖前一个
避免在外部 CSS 里用 !default 修饰变量——它只对同一文件内后续定义有效，跨文件不传递

示例：

@import (less) "variables.css"; // 内容：@brand-blue: #007bff;<br>@import (less) "mixins.css";   // 内容：.btn { color: @brand-blue; }<br>.call-to-action { .btn(); }

Webpack / Vite 环境下 `@import` 外部 CSS 有什么坑？

构建工具链会干预 @import 行为，尤其是当路径是相对路径或别名路径时：

Webpack 的 less-loader 默认不处理 @import "node_modules/some-lib/style.css"，需配置 paths 或改用 @import "~some-lib/style.css";
Vite 的 vite-plugin-less 对 (less) 导入支持较稳，但若外部 CSS 里含 @import url(...)，可能触发二次网络请求（应避免）
所有构建工具都会忽略 @import (css) 的解析，只做透传——所以别指望靠它实现主题切换时动态加载 CSS 变量