如何让SCSS样式在Nrwl Angular Monorepo内外项目均能兼容导入？

我懂你现在的困扰：用Nrwl Nx搭的Angular Monorepo里，用相对路径导入内部库的SCSS能正常跑，但想用@my-organization/other-lib这种别名风格的导入，不管是内部还是外部项目都没法统一生效。其实核心就是要让Sass和Angular的构建工具能正确识别你的库路径，咱们一步步来搞定：

1. 先搞定Monorepo内部的别名导入 #

先让内部应用/库能通过别名导入SCSS，不用再写繁琐的相对路径：

配置路径映射 #

编辑项目根目录的tsconfig.base.json，在compilerOptions.paths里添加库的路径映射，让TypeScript和构建工具能识别别名：

"compilerOptions": {
  // 其他配置...
  "paths": {
    "@my-organization/other-lib": ["libs/other-lib/src/index.ts"],
    "@my-organization/other-lib/*": ["libs/other-lib/src/*"]
  }
}

配置Sass的包含路径 #

接下来让Sass能找到别名对应的目录。在每个需要导入该SCSS的应用/库的project.json（旧版Nx可能是angular.json）的build.options里，添加stylePreprocessorOptions：

"build": {
  "options": {
    // 其他配置...
    "stylePreprocessorOptions": {
      "includePaths": [
        "./libs/other-lib/src"
      ]
    }
  }
}

现在你在内部项目里就可以直接用：

@import "@my-organization/other-lib/style.scss";

替代之前的相对路径导入了。

2. 让外部项目能正确导入你的库SCSS #

要让外部项目也能通过~@my-organization/other-lib/style.scss导入，得确保库构建后把SCSS文件输出到dist目录，并且配置正确的package.json入口：

配置库的资产输出 #

在你的库的project.json的build.options.assets里添加规则，把SCSS文件复制到dist目录：

"build": {
  "options": {
    // 其他配置...
    "assets": [
      {
        "input": "libs/other-lib/src",
        "glob": "*.scss",
        "output": "./"
      }
    ]
  }
}

配置package.json的style入口 #

编辑库的package.json（位于libs/other-lib/package.json），添加style字段指向构建后的SCSS文件，同时确保files字段包含dist目录内容：

{
  "name": "@my-organization/other-lib",
  "version": "0.0.1",
  "style": "./style.scss",
  "files": [
    "**/*"
  ],
  // 其他配置...
}

外部项目的使用方式 #

当你构建库（nx build other-lib）并发布到npm（或者本地安装：npm install ../path/to/monorepo/dist/libs/other-lib）后，外部项目就可以用熟悉的方式导入：

@import "~@my-organization/other-lib/style.scss";

这里的~会让webpack自动从node_modules目录下查找你的库。

3. 统一内部和外部的导入语法 #

如果想让内部项目也能用~前缀的导入（和外部保持一致），可以在项目根目录新建/编辑webpack.config.js，添加别名配置：

const { composePlugins, withNx } = require('@nx/webpack');

module.exports = composePlugins(withNx(), (config) => {
  config.resolve.alias = {
    ...config.resolve.alias,
    '@my-organization/other-lib': require('path').resolve(__dirname, 'libs/other-lib/src')
  };
  return config;
});

这样不管是内部还是外部，都可以用@import "~@my-organization/other-lib/style.scss";来导入SCSS文件了。

验证配置 #

最后别忘了做这几步验证：

• 运行nx build other-lib，检查dist/libs/other-lib目录下是否有style.scss文件；
• 在Monorepo内部的某个应用里用别名导入SCSS，启动项目看样式是否正常生效；
• 在外部项目安装你的库，导入SCSS后验证样式是否正确加载。

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