如何用css import在sass或less中引入样式

推荐使用预处理器的@use或@import在编译阶段合并文件，避免CSS的@import导致运行时请求；Sass优先用@use导入模块化文件如_variables.scss，Less用@import加选项控制行为，均需正确配置路径并防止重复引入。

在 Sass 或 Less 中引入外部样式文件，不推荐使用 CSS 的 @import 语法，因为它的性能较差，且会在运行时发起额外的 HTTP 请求（尤其是在旧版浏览器中）。现代做法是在预处理器层面使用其原生的 @import 指令，它会在编译阶段将文件合并，生成单一的 CSS 文件。

1. 使用 Sass 引入样式文件

Sass 支持 @import 和 @use（Sass 1.23.0+ 推荐方式）来引入其他 Sass 文件。

例如：

@use 'variables';
@use 'mixins';
@use 'base'; // 会自动查找 _base.scss

Sass 会优先加载以 _ 开头的文件（如 _base.scss），这类文件称为“部分文件”，不会单独输出为 CSS 文件。

立即学习“前端免费学习笔记（深入）”；

• 确保文件路径正确，相对路径或配置了 includePaths 的路径都可使用。
• @use 是模块化导入，变量需通过命名空间访问（如 variables.$primary-color）。
• 若想兼容旧写法，仍可用 @import，但官方已标记为弃用。

2. 使用 Less 引入样式文件

Less 使用 @import 指令来合并样式文件，支持多种选项控制行为。

壁纸样机神器

免费壁纸样机生成

0

查看详情

基本语法：

@import 'base.less';
@import 'themes/dark';
@import (less) 'style.css'; // 强制将 .css 当作 Less 解析

• (less)：即使文件是 .css 也按 Less 解析。
• (css)：强制作为纯 CSS 引入，不会被编译进输出内容，仅生成 @import url(...) 语句。
• (once)：默认行为，同一文件只导入一次。
• (multiple)：允许重复导入，用于 mixin 多次注入场景。

例如，你想把一个 CSS 文件真正“内联”进输出结果，而不是生成 @import：

@import (less) 'normalize.css';

3. 路径处理与最佳实践

无论 Sass 还是 Less，建议：

• 使用相对路径或配置构建工具（如 Webpack）的 includePaths 简化引用。
• 将可复用的变量、mixin 放在单独文件，并以 _ 开头（Sass）或约定命名（Less）。
• 避免在多个地方重复引入相同文件，防止样式重复。
• 不要用原生 CSS 的 @import url(...) 在 Sass/Less 中引入本地文件，它无法在编译期处理。

基本上就这些。关键是理解预处理器的 @import 或 @use 是编译时合并，而 CSS 的 @import 是运行时加载，两者完全不同。用对了才能发挥打包优势。不复杂但容易忽略。

以上就是如何用css import在sass或less中引入样式的详细内容，更多请关注php中文网其它相关文章！