Workspace library scss import

未关闭
#23,552 9 条评论 19 个 reaction 已指派 0 人 在 GitHub 查看

还没有人认领这个 Issue。

评估

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

调研方向

从 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 内容生成。

描述

area: @schematics/angular freq1: low severity3: broken type: bug/fix

🚀 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
  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.
主要语言
TypeScript
星标
27k
派生
11.8k
平均合并
16 小时 35 分钟
30 天内合并 PR
176

贡献指南

打开贡献指南

从这里开始

  1. 先读完整个 Issue,再读项目的贡献指南。
  2. 在 Issue 下留言说明你要接手 —— 这能避免两个人做同样的事。
  3. Fork 仓库,在一个分支上完成修改。
  4. 提交 Pull Request,并在描述里引用这个 Issue 编号。

angular/angular-cli 的其他 Issue

查看 angular/angular-cli 的全部 Issue

相似的 Issue

更多 TypeScript Issue

把新 issue 发到你的邮箱

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