推荐使用预处理器的@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（推荐）：@use 'filename'; 将文件作为模块导入，默认变量、mixin 可用。
例如：
@use 'variables';@use 'mixins';@use 'base'; // 会自动查找 _base.scss
Sass 会优先加载以 _ 开头的文件（如 _base.scss），这类文件称为“部分文件”，不会单独输出为 CSS 文件。
立即学习“前端免费学习笔记（深入）”；
注意：确保文件路径正确，相对路径或配置了 includePaths 的路径都可使用。 @use 是模块化导入，变量需通过命名空间访问（如 variables.$primary-color）。 若想兼容旧写法，仍可用 @import，但官方已标记为弃用。
2. 使用 Less 引入样式文件
Less 使用 @import 指令来合并样式文件，支持多种选项控制行为。
Revid AI
AI短视频生成平台
96 查看详情
基本语法：
@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中引入样式的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1047633.html
微信扫一扫 
支付宝扫一扫 
