Parcel开发时通过HMR注入<style>标签使CSS生效，构建后仅输出独立CSS文件但不自动插入<link>，需HTML显式声明或使用?inline手动注入。
Parcel 会解析并打包 CSS，但不会自动把它插入页面 —— 是否生效，取决于你用什么方式引入、在什么模式下运行、以及 HTML 是否配合。
JS 中 import './style.css' 为什么开发时有效、构建后白屏？
根本原因不是 Parcel 没打包，而是它不主动向 DOM 插入样式：开发时靠 HMR 动态注入 <style> 标签，构建后只输出 bundle.css 文件，但不会自动往 index.html 里加 <link rel="stylesheet">。
- 开发时（
parcel serve index.html）：CSS 被 HMR 注入为内联<style>，改完即见 - 构建后（
parcel build index.html）：CSS 输出为独立文件（如dist/main.abc123.css），但dist/index.html里没有<link>，页面无样式 - 解决办法只有两个：确保 HTML 显式声明
<link href="./style.css">，或改用import * as cssText from './style.css?inline'+ 手动创建<style>标签（仅适合小项目）
autoprefixer 不加前缀？先查 browserslist
Parcel v2+ 内置 autoprefixer，但它完全依赖 package.json 里的 browserslist 字段触发。没配，就 fallback 到默认值 "> 0.5%, last 2 versions, not dead"，IE11、旧安卓 WebView 就不会加前缀。
- 想支持 IE11？在
package.json加："browserslist": ["IE 11", "last 1 version"] -
postcss.config.js在多数情况下被忽略 —— 除非它导出 plain object 且所有插件已安装，否则 Parcel 静默跳过 - 内置
autoprefixer版本较老（v10.4.x），若需grid: 'no-autoplace'等新特性，必须手动装autoprefixer@latest并在.parcelrc中显式配置
SCSS/LESS 引入报 “Cannot find module 'sass'” 怎么办？
这不是配置漏了，是 Parcel v2.12+ 关掉了自动安装行为。它检测到 import './x.scss' 后，只检查本地有没有 sass 包，没有就直接报错，不会帮你 npm install。
立即学习“前端免费学习笔记（深入）”；
- SCSS：运行
npm install --save-dev sass（必须 Dart Sass，node-sass已废弃且不兼容） - LESS：运行
npm install --save-dev less - SCSS 中用
@import 'vars'时，确保被导入文件名是_vars.scss（以下划线开头），否则 Parcel 可能把它当入口单独打包 - CSS 的
@import无法触发预处理器编译 ——@import 'xxx.scss'在 .css 文件里无效，必须在 JS 中import './xxx.scss'
部署到子目录时 CSS 404？别忘了 --public-url ./
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；CI/CD 中建议直接写进
package.json的"build"script 里
最容易被忽略的是：HTML 入口文件里是否真的写了 <link href="./xxx.css"> —— Parcel 不扫描项目，只静态解析你传入的 HTML 中的标签；路径写错、用绝对路径、或压根没写，都会导致 CSS 不进构建图。
