如何将Sass变量导入Angular 5组件的TypeScript文件？

你遇到的问题很典型——Angular CLI虽然基于Webpack，但默认隐藏了Webpack配置，直接在.angular-cli.json的scripts里添加loader是无效的，因为scripts是用来加载运行时脚本的，不是配置Webpack编译阶段的loader。下面给你两种可行的方案，优先推荐第一种无需额外配置的方法：

方案一：用CSS Modules的:export语法（无需额外loader） #

这是Angular CLI原生支持的方法，不需要任何第三方loader，步骤如下：

1. 修改你的SCSS变量文件
   在../styles/_variables.scss中，用:export块把需要共享的变量导出为JS可访问的键值对：

// 原有SCSS变量定义
$primary-color: #1976d2;
$font-size-base: 14px;
$border-radius: 4px;

// 导出给JS/TS使用
:export {
  primaryColor: $primary-color;
  fontSizeBase: $font-size-base;
  borderRadius: $border-radius;
}

2. 确保typings支持SCSS导入
   在你的typings.d.ts中添加以下声明，让TypeScript识别SCSS模块：

declare module '*.scss' {
  const content: Record<string, string>;
  export default content;
}

3. 在组件中导入使用
   现在可以直接导入变量文件并使用：

// 注意这里不需要加sass-variable-loader前缀
import variables from '../styles/_variables.scss';

// 使用示例
console.log('主题色:', variables.primaryColor);
document.body.style.fontSize = variables.fontSizeBase;

这个方法的好处是完全依赖Angular CLI原生能力，不需要修改Webpack配置，稳定且易维护。

方案二：扩展Webpack配置使用sass-variable-loader #

如果你坚持要用sass-variable-loader，需要通过Angular的自定义Webpack配置来添加loader，步骤如下：

1. 安装自定义Webpack构建器

npm install @angular-builders/custom-webpack --save-dev

2. 创建自定义Webpack配置文件
   在项目根目录创建custom-webpack.config.js，配置loader规则：

module.exports = {
  module: {
    rules: [
      {
        // 匹配你的变量SCSS文件，确保只针对这个文件使用loader
        test: /_variables\.scss$/,
        use: ['sass-variable-loader']
      }
    ]
  }
};

3. 修改Angular配置文件
   打开angular.json（旧版本是.angular-cli.json），将默认的构建器替换为自定义Webpack构建器：

• 在architect > build下修改：

  "builder": "@angular-builders/custom-webpack:browser",
  "options": {
    "customWebpackConfig": {
      "path": "./custom-webpack.config.js"
    },
    // 保留原有其他配置...
  }
  

• 在architect > serve下修改：

  "builder": "@angular-builders/custom-webpack:dev-server"
  

4. 导入变量使用
   现在可以按照你原来的方式导入（不需要在.angular-cli.json的scripts里加loader了）：

import * as variables from '../styles/_variables.scss';

为什么你之前的方法无效？ #

你在.angular-cli.json的scripts里添加sass-variable-loader的dist文件是错误的——scripts数组的作用是将指定脚本注入到全局运行环境（比如加载jQuery），而Webpack loader是编译阶段的工具，必须配置在Webpack的module.rules中才能生效，Angular CLI默认不暴露这个配置，所以直接加进去没用。

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