开发环境可用@import但生产环境必须避免，因其阻塞渲染、无法并行加载、不支持缓存复用，且构建工具不处理纯css中@import的相对路径；正确方式是js中静态import配合构建配置控制输出，或通过alias映射不同环境样式入口。
开发环境用 @import 但生产环境不能这么干
开发阶段用 @import 加载 CSS 看似方便，但生产环境必须避免——它会阻塞渲染、无法并行加载、不支持缓存复用，且 Webpack/Vite 等构建工具默认不处理 @import 中的相对路径（尤其跨包时容易 404）。真正可行的方式是：开发期靠构建工具注入，生产期靠构建产物自动拼接。
- Webpack 场景下，直接在 JS 中
import './styles.css'，让css-loader+MiniCssExtractPlugin控制输出：开发用style-loader动态插入<style></style>，生产用插件抽成独立.css文件 - Vite 场景下，
import语句行为一致，但开发时走 HMR 注入，生产构建后自动合并/分割，无需额外配置 - 如果非要用
@import（比如遗留 Sass），确保它只出现在.scss或.less文件里，且由对应预处理器 loader 处理，而不是放在纯.css中
process.env.NODE_ENV 不能直接控制 CSS 引入逻辑
别在 JS 里写 if (process.env.NODE_ENV === 'development') { import('./dev-theme.css') } —— 这会导致构建工具无法静态分析依赖，热更新失效，Tree-shaking 失效，甚至打包报错 Dynamic require is not supported。环境变量影响的是构建配置，不是运行时引入路径。
- 正确做法是把不同环境的样式入口写死在构建配置中：Webpack 的
entry或 Vite 的build.rollupOptions.input指向不同主文件 - 或者用别名（alias）：在 Webpack 的
resolve.alias或 Vite 的resolve.alias中，把@styles/main映射到./src/styles/main.dev.css（开发）或./src/styles/main.prod.css（生产） - 注意：CSS 文件本身不能有
export，所以别试图用require()动态加载；所有import必须是静态语句
CDN 上的 CSS 怎么按环境切换？
生产环境常需从 CDN 加载第三方 CSS（如字体、图标库），而开发环境走本地代理或禁用。这时不能靠 JS 判断环境再 document.write，而是用构建时替换 + HTML 模板注入。
- Webpack：用
HtmlWebpackPlugin的templateParameters注入变量，模板中写<link rel="stylesheet" href="<%=%20cssCdnUrl%20%>"> - Vite：用
html.inject插件或vite-plugin-html，在index.html中写<!--{injected-css}-->，构建时替换成对应链接 - 关键点：CDN 地址必须在构建时确定，不能运行时通过
window.location.hostname判断——否则 SSR 渲染会出错，且违反构建可复现原则
theme-color: blue 和生产用的 theme-color: #1a73e8，如果都靠 CSS Custom Properties 实现，就得确认构建后变量没被压缩工具误删（cssnano 默认删未用变量），这点很容易被忽略。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
