angular / angular/angular-cli

Workspace library scss import

未关闭
#23,552 9 条评论 19 个 reaction 已指派 0 人 在 GitHub 查看
area: @schematics/angular freq1: low severity3: broken type: bug/fix
主要语言
TypeScript
星标
27k
派生
11.8k
平均合并
14 小时 23 分钟
30 天内合并 PR
162

描述

# 🚀 Feature request

### Command (mark with an `x`)

- [ ] new
- [x] build
- [ ] serve
- [ ] test
- [ ] e2e
- [x] generate
- [ ] add
- [ ] update
- [ ] lint
- [ ] extract-i18n
- [ ] run
- [ ] config
- [ ] help
- [ ] version
- [ ] doc

### Description

With a workspace architecture, the exported stylesheets cannot be imported using package name. Given a library (`lib`) and a project (`app`) in an angular workspace. The library properly copies an scss file to the `dist` folder (which is the default output folder) and adds it to the `exports` section of the `package.json`. However, the consuming app cannot `@import` or `@use` the exported scss file.

Given the following files:

- dist/my-company/my-lib/assets/_theme.scss
- projects/app/src/styles.scss

And the following export in the `package.json` of the library:

```
"exports": {
"./theme": {
"sass": "./assets/_theme.scss"
}
},
```

And the default settings that the Angular CLI generates (with `ng new library` and so on...),

### Describe the solution you'd like

With the settings mentioned above, importing an exported scss file should work out of the box (currently it does not compile with the error `SassError: Can't find stylesheet to import.`).

```
// styles.scss
@use "@my-company/my-lib/theme" as myTheme;
```

### Describe alternatives you've considered

1. Changing the default `dist` output of the library to the `node_modules` and the automatically removed `@` symbol is added to the path (in short `dist/my-company/my-lib` -> `node_modules/@my-company/my-lib`) resolves the scss import problem. The `tsconfig.json` must be adjusted as well. If this is the desired solution, then it should be the default generated with the CLI.
2. Create an NPM Link to the dist directory (which has its own pros and cons). If this is the desired solution, then the `tsconfig.json` does not need to define additional `paths` and this should be an operation that the generation (through the CLI) does automatically. Or at least extend [the documentation](https://angular.io/guide/creating-libraries#managing-assets-in-a-library).

贡献指南

打开贡献指南

调研方向

从 workspace 库的 build 和 generate 路径开始,以生成的 dist/my-company/my-lib/assets/_theme.scss、package.json 中的 exports 条目和 projects/app/src/styles.scss 作为复现点。运行应用的 @use 导入并检查生成的 tsconfig.json 设置;完成的标准是导出的 SCSS 无需手动路径或 npm-link 变通方案即可解析。

由索引模型根据 Issue 内容生成。

评估

技术栈
angular, scss, typescript
领域
build-system, cli, frontend
Issue 类型
功能
难度
4/5
预计耗时
3-5 天
活跃度
停滞
描述清晰度
基本清楚
新手友好度
35/100

把新 issue 发到你的邮箱

精选适合新手参与的 GitHub issue 摘要。