Angular 11 组件样式导入异常：直接通过URL访问路由时@include样式不生效问题咨询

这种场景我之前在项目里也碰到过，直接访问路由样式失效、导航过去才正常，大概率和样式的加载时机、SCSS路径解析或者路由组件的打包策略有关，给你梳理几个最可能的原因和解决方向：

1. 路由组件代码分割导致的样式懒加载异常 #

如果你的项目用了路由级的代码分割（比如React的React.lazy、Vue的异步组件），直接访问第二个路由时，组件的样式可能没被正确打包或加载：

• 从第一个组件导航过去时，第一个组件已经加载了共享的custom.scss，浏览器缓存了相关样式，第二个组件能直接复用；但直接访问第二个路由时，组件是单独加载的chunk，可能SCSS的导入逻辑没被打包工具正确处理，导致mixin没被编译进最终CSS，自然.myClassCustom的样式就没了。
• 解决办法：
  • 把src/styles/custom.scss作为全局样式导入到项目入口文件（比如index.js/main.js），而不是每个组件单独导入。这样全局mixin会提前编译好，所有组件都能正常引用，不会受路由加载方式影响。
  • 检查路由配置的代码分割逻辑，比如React中确保React.lazy包裹的组件里，SCSS文件是直接导入的，没有被遗漏在打包chunk外。

2. SCSS导入路径的解析问题 #

你用的@import 'src/styles/custom.scss'是绝对路径，但不同打包环境下路径解析逻辑可能不一致：

• 第一个组件加载时，打包工具（比如webpack）是从项目根目录解析这个路径，但直接加载第二个路由的组件时，打包后的代码运行上下文变了，可能找不到custom.scss，mixin没法编译，样式自然生成不出来。
• 解决办法：
  • 改用相对路径导入，比如如果组件在src/components/xxx下，就写成@import '../../styles/custom.scss'，确保不管组件在哪，都能精准找到全局样式文件。
  • 给打包工具配置路径别名，比如webpack里把@指向src目录，然后用@import '@/styles/custom.scss'，这样路径解析更稳定，不会因为组件位置或路由加载方式出错。

3. 缓存或打包产物的遗留问题 #

有时候直接访问路由时，浏览器加载的是旧的打包产物，而导航过去时用的是新缓存：

• 比如第一次加载第一个组件时，打包后的CSS包含了custom.scss的内容，但第二个组件的chunk没包含这段样式；直接访问时加载的是单独的chunk，缺少样式；导航时因为第一个组件已经加载了全局样式，所以能生效。
• 解决办法：
  • 清除浏览器缓存，开发模式下可以禁用缓存（比如webpack dev server开启hot: true同时关闭缓存）。
  • 检查打包配置，确保共享的SCSS文件被正确提取到全局CSS中，或者每个组件的SCSS都能被编译并注入到页面。

4. 框架样式注入机制的差异 #

不同前端框架对组件样式的注入时机有不同处理：

• 比如React用CSS Modules或者styled-components时，样式是随组件挂载才注入页面的；如果直接访问路由时，组件的样式注入逻辑延迟或失败，就会导致样式不生效。而从其他页面导航过来时，框架的样式注入机制已经正常运行，所以能正确加载。
• 解决办法：
  • 检查框架的样式配置，比如CSS Modules要确保文件名是[name].module.scss，且正确导入；普通SCSS要确保打包工具把样式正确提取到<style>标签或单独CSS文件。
  • 可以临时把样式代码内联到组件里测试，如果生效，就说明是导入路径或打包的问题。

内容的提问来源于stack exchange，提问作者Whowas