ASP.NET Core 2.0 Angular模板中全局.scss文件变量共享问题求助

我完全懂你现在的困扰——通过boot.browser.ts用require导入global.scss确实能让样式全局生效，但组件的.scss文件根本拿不到里面的变量和混合宏对吧？这是因为require只是把编译好的CSS注入到页面，并没有让SASS预处理器在编译其他组件样式时能访问到这些全局资源。下面给你几个在这个特定模板环境下可行的解决方案：

方法1：通过Angular CLI配置全局注入（推荐） #

ASP.NET Core 2.0的Angular模板是基于Angular CLI构建的，直接修改ClientApp下的.angular-cli.json文件就能实现全局资源共享：

1. 打开.angular-cli.json，找到styles数组节点
2. 把你的global.scss路径添加进去，示例如下：

"styles": [
  "../styles/global.scss",
  "styles.scss"
]

3. 保存文件后重启开发服务器，这样所有组件的.scss文件在编译时都会自动继承global.scss里的变量、混合宏和样式，不需要在每个组件里手动导入。

注意：路径要根据你的项目结构调整，确保能正确指向global.scss文件。

方法2：手动在组件样式中导入全局资源 #

如果不想修改CLI配置，可以在每个组件的.scss文件开头添加导入语句：

@import "../styles/global.scss";

这样该组件就能访问global.scss里的所有SASS特性了。缺点是组件多的话会有点繁琐，但胜在灵活，适合只需要在部分组件中使用全局资源的场景。

方法3：配置Webpack的sass-loader全局注入 #

如果你的项目自定义了Webpack配置（模板默认的Webpack配置可能在build文件夹下），可以通过sass-loader的全局注入功能实现：

1. 找到Webpack配置文件中的module.rules部分，定位到处理.scss的规则
2. 修改sass-loader的选项，添加additionalData（旧版sass-loader可能用data参数）：

module: {
  rules: [
    {
      test: /\.scss$/,
      use: [
        'style-loader',
        'css-loader',
        {
          loader: 'sass-loader',
          options: {
            additionalData: '@import "./styles/global.scss";'
          }
        }
      ]
    }
  ]
}

3. 重启开发服务器后，所有.scss文件在编译时都会自动注入这句导入，无需手动添加。

小提示 #

优先选择方法1，这是Angular官方推荐的全局样式管理方案，最贴合模板的架构，也最省心。如果尝试后遇到路径问题，可以用绝对路径或者调整相对路径来定位global.scss。

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