Parcel项目如何自动引入CSS

Parcel不会自动向DOM注入CSS，开发时靠HMR注入style标签，生产时仅输出独立CSS文件且不自动添加link标签；需确保HTML显式引入或使用?inline手动注入。

Parcel 项目里 CSS 不会“自动注入 DOM”，它只自动打包和转译——是否生效，取决于你用什么方式引入、在什么模式下运行、以及 HTML 是否配合。

import './style.css' 在开发时生效，但 build 后不生效

这是最常被误解的一点：Parcel 确实会解析 import './style.css'，但它在 parcel serve 模式下靠 HMR 动态插入 <style> 标签，在 parcel build 模式下默认只输出 bundle.css 文件，不会自动往 HTML 里加 <link rel="stylesheet">。

1. 开发时（parcel serve src/index.html）：样式实时注入，改完即见
2. 构建后（parcel build src/index.html）：CSS 被提取为独立文件（如 dist/xxx.css），但 dist/index.html 里没有 <link> —— 页面白屏或无样式
3. 解决办法不是改 JS，而是确保入口是 HTML，并且该 HTML 里显式写了 <link href="./styles.css">；或者改用 import * as cssText from './style.css?inline' + 手动创建 <style> 标签（仅适合小项目）

autoprefixer 不生效？先查 browserslist 配置

Parcel v2+ 内置 autoprefixer，但它完全依赖 package.json 里的 browserslist 字段触发，postcss.config.js 在多数情况下被忽略（除非导出 plain object 且插件已安装）。

1. 没配 browserslist → fallback 到默认值 "> 0.5%, last 2 versions, not dead"，IE11、旧安卓 WebView 就不会加前缀
2. 想支持 IE11？在 package.json 加："browserslist": ["IE 11", "last 1 version"]
3. 内置的 autoprefixer 版本较老（v10.4.x），若需 grid: 'no-autoplace' 等新特性，必须手动装 autoprefixer@latest 并在 .parcelrc 中显式配置

SCSS/LESS 报 “Cannot find module 'sass'”

这不是配置漏了，是 Parcel v2.12+ 关掉了自动安装行为。它检测到 @import 'xxx.scss' 或 import './x.scss' 后，只检查本地有没有 sass 包，没有就直接报错，不会帮你 npm install。

1. SCSS：运行 npm install --save-dev sass（必须 Dart Sass，node-sass 已废弃且不兼容）
2. LESS：运行 npm install --save-dev less
3. SCSS 中 @import 'vars' 要求被导入文件名为 _vars.scss（以下划线开头），否则 Parcel 可能把它当独立入口打包，导致重复或缺失
4. @import 'normalize.css' 能走 npm 解析，但前提是 normalize.css 已安装且包主入口导出的是 CSS 文件

CSS Modules 必须用 .module.css 后缀

Parcel 对 CSS Modules 的识别非常严格：只有文件名匹配 *.module.css（或 *.module.scss 等）才会启用局部作用域；style.css 或 index.module.css 都不行。

1. 正确命名：Button.module.css → import styles from './Button.module.css' 生效
2. 错误命名：Button.css → 即使写了 export 也没用，当成普通全局 CSS 处理
3. JS 中 import 返回的是对象，不是字符串；若需要内联样式文本，得加 ?inline 后缀：import cssText from './Button.module.css?inline'

真正容易被忽略的是：Parcel 的“零配置”只覆盖常见路径，一旦涉及构建产物落地、HTML 注入时机、预处理器版本对齐或模块作用域边界，就必须直面它的隐式规则——而不是假设“它应该懂”。