如何为Angular 6库配置全局样式（变量、混合宏等）

针对你遇到的Angular CLI生成的类库中全局样式无法在子组件生效、angular.json的styles配置对projectType: "library"无效的问题，我给你整理了几个实用的解决方案，都是我之前踩坑后验证有效的方法😉：

核心原因说明 #

首先得搞懂为什么会出现这个问题：Angular类库的构建依赖ng-packagr，它的处理逻辑和普通Angular应用完全不同：

• 类库的angular.json里styles数组配置不会被自动解析应用
• 组件默认开启ViewEncapsulation.Emulated，根组件导入的样式仅作用于自身，无法渗透到子组件的样式环境中

方案一：使用stylePreprocessorOptions配置全局样式路径（推荐） #

这个方法能让你在类库的所有组件SCSS文件中直接引用变量/混合宏文件，不用写冗长的相对路径，且变量会在所有组件的样式中生效：

1. 打开项目根目录的angular.json，找到projects -> my-library -> architect -> build -> options节点
2. 添加stylePreprocessorOptions配置，指定你的SCSS资源文件夹路径：

   "options": {
     // 保留原有配置...
     "stylePreprocessorOptions": {
       "includePaths": [
         "projects/my-library/src/sass"
       ]
     }
   }
   

3. 在类库的任意组件SCSS文件中，直接导入变量/混合宏文件：

   // 比如在widgets下的某个组件样式文件中
   @import 'variables'; // 无需写../sass/这种相对路径
   
   .my-widget {
     background-color: $primary-color; // 直接使用定义好的变量
   }
   

方案二：创建全局样式入口并在组件中导入 #

如果你还有全局基础样式（比如重置样式、通用布局类），可以结合方案一使用：

1. 在projects/my-library/src/sass下创建styles.scss，统一导入所有全局资源：

   @import 'variables';
   @import 'mixins';
   // 其他全局样式，比如重置、通用类...
   

2. 在类库的每个组件SCSS文件中导入这个全局样式入口：

   @import 'styles';
   
   // 组件专属样式代码...
   

   不用担心重复打包的问题，ng-packagr会自动处理重复导入，不会导致样式冗余

方案三：让应用侧导入类库的全局样式（适用于需暴露给应用的样式） #

如果你的类库有需要在应用层面生效的全局样式，可以将styles.scss的导入方式告知用户：

1. 在类库的public_api.ts中添加注释说明：

   /* 若需使用类库全局样式，请在应用的styles.scss中添加：@import '~my-library/sass/styles'; */
   export * from './lib/my-library.module';
   

2. 用户在主应用的styles.scss中导入即可：

   @import '~my-library/sass/styles';
   

验证步骤 #

配置完成后，执行以下命令构建类库并验证效果：

ng build my-library

然后在主应用中使用类库的组件，检查变量、混合宏是否正常生效即可。

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