Webpack下@import带~失效的根本原因是Dart Sass不识别~，需sass-loader开启webpackImporter: true并配置includePaths；Vite中~仅支持@import，@use需用npm:语法；纯CSS库应避免SCSS导入，改用JS import或HTML link引入。
直接用 @import "~normalize.css" 会报错，不是写法错了，是构建工具没接住这个 ~。
Webpack 下 @import 带 ~ 失效的真正原因
Sass 编译器（Dart Sass）压根不认识 ~——它只是个约定，靠 Webpack 的 sass-loader 在解析前做路径替换。如果没配对，~ 就当普通字符处理，自然找不到文件。
- 必须在
sass-loader的options中显式开启webpackImporter: true，否则sass-loader会退回到原生 Sass 解析器，直接报Can't resolve -
resolve.alias配了{ "~": path.resolve(__dirname, "node_modules") }不够，还得同步配sass-loader.options.includePaths，否则 Sass 层根本不去node_modules扫描 - 错误示例：
@import "~bootstrap/dist/css/bootstrap.min.css";—— 这类纯 CSS 文件能被@import拉进来，但不会参与 Sass 编译，只原样输出@import url(...)，且字体、图片等url()路径容易 404
Vite 中 ~ 只对 @import 有限支持
Vite 默认识别 ~，但仅限 @import 语句；@use 完全不认，连 @use "npm:normalize.css" 都要 Vite 4.3+ 才勉强支持。
Zenlink - Node SDK for ZenHeart
下载
ZenHeart zenlink 与 zenlink-mcp 为 OpenClaw，涵盖安装、MCP 注册、钩子接线、入站轮询及升级维护。
- 推荐写法：
@import "normalize.css/normalize.css";（前提是includePaths已配node_modules） - 若要用
@use加载 SCSS 源码（如 Bootstrap 的函数），改用@use "npm:bootstrap/scss/functions";，这是 Vite 原生支持的语法 -
vite.config.ts中别漏掉css.preprocessorOptions.sass.additionalData，否则全局变量注入可能失效
纯 CSS 库（如 highlight.js、github-markdown-css）不该走 SCSS 导入
它们不提供 SCSS 变量或 mixin，硬塞进 @import 只是徒增一层构建链路，还容易因相对路径或 url() 解析失败而白忙活。
立即学习“前端免费学习笔记（深入）”；
- 更干净的做法：在入口 JS（如
main.ts）里import "highlight.js/styles/github.css";，由构建工具统一处理资源加载和 hash - 或者直接在 HTML 中用
<link rel="stylesheet">引 CDN，跳过构建流程 - 若项目已用 CSS Modules 或
<style scoped>，第三方 CSS 必须转成模块再引入，否则选择器作用域不匹配
最常被忽略的一点：SCSS 层面无法“隔离”第三方 CSS 规则。无论你用 @import 还是 @use，只要它输出了 .btn { ... }，就一定会污染全局样式表——这不是路径问题，是 CSS 本身的作用域机制决定的。
