Parcel 不是全自动支持 SCSS/Less/Stylus，需在 JS 中显式 import 预处理器文件才能触发自动安装与编译；纯 HTML 引入或 CSS @import 无效，路径须相对，部署子目录需加 --public-url ./，内联样式不处理。
Parcel 会自动安装预处理器依赖，但必须手动引入
Parcel 不是“全自动”支持 SCSS/Less/Stylus，它只在检测到对应语法时才触发安装逻辑。你得先在 JS 文件里 import 一个预处理器文件，Parcel 才会去查本地有没有 sass、less 或 stylus，没有就自动装。纯 HTML 里用 @import 或 <link rel="stylesheet" href="xxx.scss"> 是无效的。
常见错误现象：
- 运行
parcel build index.html后，SCSS 文件没编译，浏览器报 404 -
npm run dev启动后样式不生效，控制台没报错但页面空白
实操建议：
- 确保预处理器文件（如
styles.scss）被 JS 显式导入：import './styles.scss'; - 不要用 CSS 的
@import引入另一个 SCSS 文件——Parcel 对 CSS 内部路径解析不可靠；改用 JS 中多次import - 首次运行时若提示
Cannot find module 'sass'，别手动npm install sass——直接回车，Parcel 会自己装（v2.12+ 及 v3 默认用sass而非node-sass）
路径必须相对，且不能以 / 开头
Parcel 解析预处理器 @import 或 url() 时，上下文是“当前 SCSS 文件所在目录”，不是项目根目录。写成 @import '/reset.scss' 或 url(/img/logo.png) 会导致构建失败或 404。
立即学习“前端免费学习笔记（深入）”；
Miller (mlr) 是一个命令行工具，用于查询、整形和重新格式化名称索引数据，如 CSV、TSV、JSON 和 JSON Lines。它将 awk、sed、cut、join 和 sort 的功能整合到一个专为结构化数据处理而构建的单一工具中。
实操建议：
- 所有
@import都用相对路径：@import './reset.scss';、@import '../mixins/breakpoints.scss'; - CSS 中图片路径也一样：
background: url('./assets/icon.svg'); - 如果预处理器文件在子目录（如
src/css/main.scss），它里面@import的路径必须相对于src/css/，而不是src/
build 后 CSS 路径重写可能出错，尤其部署到子路径时
Parcel 默认把生成的 CSS 文件路径写成 /main.abc123.css（带前导斜杠），这在部署到域名根路径（https://example.com/）时没问题；但若部署到子目录（https://example.com/my-app/），浏览器会向根目录发请求，404。
实操建议：
- 打包命令加
--public-url ./参数：parcel build index.html --public-url ./ - 这样生成的
<link href="main.abc123.css">就是相对路径，能适配任意子目录部署 - 注意：这个参数影响所有资源（JS/CSS/图片），不只是预处理器产出的 CSS
内联样式和 <style> 标签里的预处理器语法不会被处理
Parcel 只处理被 JS import 的预处理器文件，以及 HTML 中通过 <link href="xxx.css"> 引入的已编译 CSS。写在 <style> 标签里或 JS 内联的字符串模板中的 SCSS 语法（比如 document.querySelector('style').textContent = `$primary: #333; body { color: $primary; }`）完全不会被解析。
实操建议：
- 把预处理器逻辑全写在独立文件里（
theme.scss、variables.scss），然后统一import - 避免在 JS 里拼接样式字符串；要用动态主题，改用 CSS Custom Properties + JS 控制
- 如果真要运行时编译，得引入
sass-embedded或less.js，但这已脱离 Parcel 零配置范畴
