Workspace library scss import
还没有人认领这个 Issue。
评估
- 难度
- 4/5
- 预计耗时
- 3-5 天
- 新手友好度
- 35/100
- Issue 类型
- 功能
- 描述清晰度
- 基本清楚
- 活跃度
- 停滞
- 技术栈
- angular, scss, typescript
- 领域
- build-system, cli, frontend
调研方向
从 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 内容生成。
描述
🚀 Feature request
Command (mark with an x)
- new
- build
- serve
- test
- e2e
- 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
- Changing the default
distoutput of the library to thenode_modulesand the automatically removed@symbol is added to the path (in shortdist/my-company/my-lib->node_modules/@my-company/my-lib) resolves the scss import problem. Thetsconfig.jsonmust be adjusted as well. If this is the desired solution, then it should be the default generated with the CLI. - Create an NPM Link to the dist directory (which has its own pros and cons). If this is the desired solution, then the
tsconfig.jsondoes not need to define additionalpathsand this should be an operation that the generation (through the CLI) does automatically. Or at least extend the documentation.
- 主要语言
- TypeScript
- 星标
- 27k
- 派生
- 11.8k
- 平均合并
- 16 小时 35 分钟
- 30 天内合并 PR
- 176
贡献指南
从这里开始
- 先读完整个 Issue,再读项目的贡献指南。
- 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
- Fork 仓库,在一个分支上完成修改。
- 提交 Pull Request,并在描述里引用这个 Issue 编号。
angular/angular-cli 的其他 Issue
-
area: @angular/build gemini-triaged
难度 2/5 1-3 小时 新手友好度 74/100
angular/angular-cli#33955 ·
-
area: @angular/cli gemini-triaged
难度 2/5 1-3 小时 新手友好度 72/100
angular/angular-cli#33055 · 1 条评论 · 3 个 reaction ·
-
area: @angular/build gemini-triaged
难度 4/5 3-5 天 新手友好度 72/100
angular/angular-cli#34137 ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34131 · 已指派 1 人 ·
-
angular/build:library area: @angular/build gemini-triaged
angular/angular-cli#34130 · 已指派 1 人 ·
查看 angular/angular-cli 的全部 Issue
相似的 Issue
-
enhancement
难度 2/5 1-3 小时 新手友好度 70/100
dennys-bd/agent-hive#184 ·
-
Add: hunch 未关闭
难度 2/5 1-3 小时 新手友好度 74/100
AbdelStark/awesome-typesafe#104 ·
-
ai-observability bug team/ai-observability
难度 2/5 1-3 小时 新手友好度 78/100
-
难度 2/5 1-3 小时 新手友好度 78/100
-
难度 2/5 1-3 小时 新手友好度 78/100
vicharanashala/fln#563 ·