Angular样式库导入SCSS变量失败：为何@import找不到样式表？

核心问题 #

你遇到的问题主要来自三个方面：Sass路径解析机制限制、库的package.json配置缺失、副作用标识错误导致构建工具优化掉样式文件。

具体原因分析 #

1. Sass路径解析限制：在styles.scss中用@import '@mylib/styles/src/main';时，Sass默认不会自动从node_modules查找该路径，除非配置了includePaths或库在package.json中提供明确的样式入口映射。而Angular CLI在angular.json的styles数组中导入时，是直接通过文件系统路径加载，不受Sass自身路径规则限制，因此能正常工作。
2. package.json配置缺失：Bootstrap的package.json配置了style、sass等字段，明确告知构建工具样式入口和路径规则；你的库缺少这些配置，导致构建工具无法识别正确的导入路径。
3. sideEffects设置错误：将sideEffects设为false会让Webpack等构建工具认为库无副作用，从而优化掉样式文件的导入，这是导致文件找不到的关键原因之一。

修复步骤 #

1. 修改库的package.json

更新配置如下：

{
  "name": "@mylib/styles",
  "version": "0.0.1",
  "peerDependencies": {
    "@angular/common": "^16.2.12",
    "@angular/core": "^16.2.12"
  },
  "dependencies": {
    "tslib": "^2.3.0"
  },
  "sideEffects": ["*.scss"],
  "style": "src/main.scss",
  "sass": {
    "includePaths": ["src/styles"]
  }
}

• sideEffects: ["*.scss"]：告知构建工具样式文件有副作用，不能被优化删除
• style：指定库的主样式入口文件，让构建工具能通过包名直接识别
• sass.includePaths：配置Sass的路径搜索目录，方便后续直接导入子样式文件（比如@use 'colors'）

2. 优化ng-package.json配置

添加styleIncludePaths，让ng-packagr在构建时识别样式路径：

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/styles-lib",
  "lib": {
    "entryFile": "src/public-api.ts",
    "styleIncludePaths": ["src/styles"]
  },
  "assets": [
    "./src/**/*.scss",
    "./src/styles/font"
  ]
}

3. 在应用中正确导入样式

修改styles.scss中的导入语句为：

@import '@mylib/styles';

若需单独导入变量文件（如colors.scss），因已配置includePaths，可直接写：

@use '@mylib/styles/src/styles/colors' as colors;

为什么Bootstrap可以正常工作？ #

Bootstrap的package.json已配置完整的样式入口（style、sass字段），且sideEffects设置正确，同时Webpack对这类主流包有默认的路径解析优化，因此无论是在angular.json还是组件样式文件中导入都能正常识别。

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