parcel自动处理css文件：无需安装loader或配置postcss.config.js，它内置转换器，基于browserslist自动启用autoprefixer和cssnano，支持hmr、@import内联、url资源处理及css modules（需.module.css后缀）。
Parcel怎么自动处理CSS文件？不用装loader也不配postcss.config.js
Parcel 真的不认 postcss.config.js，也不需要你手动装 postcss、autoprefixer 或 cssnano。它靠内置转换器直接解析 .css 文件，并在开发和构建阶段自动启用标准优化流程。
常见错误现象：你写了 display: flex，但 IE11 下没生效，以为是 Parcel 没加前缀——其实它默认开了 Autoprefixer（目标浏览器基于 package.json 的 browserslist 字段），只是你没配 browserslist，结果按默认规则（现代主流浏览器）编译，自然不兼容老版本。
- 开发模式下：
.css文件被解析后注入<style></style>标签，支持 HMR（改完保存，样式立刻更新，不刷新页面） - 生产构建时：
autoprefixer+cssnano自动启用（无需安装或声明） - 若项目根目录有
browserslist，Parcel 会读取它；没有则 fallback 到默认值（"> 0.5%, last 2 versions, not dead"） - 注意：CSS Modules 默认关闭，要启用需显式写成
import styles from './Button.module.css'，Parcel 会自动识别.module.css后缀并开启模块化
引入SCSS/LESS时为什么有时报“Cannot find module 'sass'”？
Parcel 检测到 import './index.scss' 后，会检查本地是否已安装 sass（或 less）。没装就报这个错——不是配置问题，是它真没帮你自动 npm install，尤其在较新版本（v2.12+）中，默认关闭了 auto-install 行为（出于安全与可控性考虑）。
- 解决办法只有两个：
npm install --save-dev sass（SCSS）或npm install --save-dev less（LESS） - 别装
node-sass：它已废弃，Parcel v2+ 只认sass（Dart Sass） - 如果用的是
@import 'vars'语法，确保被导入的_vars.scss文件名以_开头，否则 Parcel 可能把它当入口文件单独打包 - 路径别写错：
import './styles/index.scss'和@import 'index'是两回事——后者只在 CSS/SCSS 内部生效，且只找同目录或node_modules中的文件
HTML里用和JS里import './style.css'有啥区别？
行为上几乎没区别，Parcel 都会解析、转译、注入、HMR。但关键差异在**作用域和复用性**：
-
<link href="./style.css">：全局样式，整个页面生效；适合重置、基础排版等 -
import './Button.css'（或.module.css）：仅作用于当前模块上下文；配合 JS 逻辑更易封装组件样式 - 如果同时存在两者，Parcel 会把它们合并进同一个 CSS bundle，但顺序按 HTML 中
<link>位置和 JSimport执行顺序决定——这点容易被忽略，导致样式覆盖意外失效 - 注意：CSS 文件里的
url(./img.png)会被自动解析并拷贝进dist，路径也自动重写，不用额外配置file-loader类插件
为什么build后CSS里仍有@import，没内联？
Parcel 默认对 @import 做静态分析，只要不是动态拼接（如 @import url("a" + ".css")），都会提前解析并内联。但如果看到输出 CSS 还保留 @import，基本是以下两种情况之一：
- 你用了
@import引入了外部 CDN 地址，例如@import url('https://fonts.googleapis.com/css2?family=...');—— Parcel 不会下载或内联远程资源，原样保留 - CSS 文件本身来自
node_modules（比如import 'normalize.css'），Parcel 默认跳过node_modules中的@import内联，避免污染或循环依赖；此时它会生成独立 CSS 文件并由 HTML<link>加载 - 想强制内联？只能手动把内容复制进项目本地 CSS，或改用 JS 动态插入
<link>（但失去 HMR 支持）
最常被忽略的一点：Parcel 的 CSS 处理是“按需触发”的——它不会扫描所有 .css 文件，只处理那些被 HTML <link> 或 JS import 显式引用的文件。没被引用的 CSS 就是死代码，不会进打包结果，也不会报错提醒你。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
