解决在同一工作区中从应用程序解析库项目的SASS文件?

huangapple go评论70阅读模式
英文:

Resolving a library projects SASS files from an application in the same workspace?

问题

能否通过一种类似于从同一工作区的应用程序中解析ts文件的方法来解析工作区库中包含的SASS?为了提供上下文,我将如下设置一个真实的工作区:

ng new theme-workspace --create-application=false
cd theme-workspace
ng g library theme
mkdir projects/theme/src/lib/styles
touch projects/theme/src/lib/styles/index.scss
ng g application playground

projects/theme/src/lib/styles目录中,我们将在index.scss中添加以下内容:

$color: red;

为了包含样式资源,我们需要更新ng-package.json,添加一个类似于以下的asset块:

"assets": [
    { "input": "src/lib/styles", "glob": "**/*.scss", "output": "styles" }
]

如果我们像这样构建这个项目库:

ng build theme

我们会发现dist/theme/styles包含index.scss

我们可以从playground中像这样访问生成的ts组件ThemeComponent

import { ThemeComponent } from 'theme';

当使用@use来导入SASS的index.scss模块时,是否可以使用类似的命名空间?

例如,如果我们在playground中尝试这样做,styles.scss模块会失败:

@use 'theme/styles' as t;

这是错误信息:

SassError: 无法找到要导入的样式表。
2 │ @use 'theme/styles' as t;

现在,我们可以通过使用相对文件导入来解决这个问题,但我想知道是否有一种使用库名称空间的“快捷”方法?

英文:

Is it possible to resolve SASS contained in a workspace library using an approach that is similar to resolving ts files from an application within the same workspace? For context I'll setup a real workspace as follows:

ng new theme-workspace --create-application=false
cd theme-workspace
ng g library theme
mkdir projects/theme/src/lib/styles
touch projects/theme/src/lib/styles/index.scss
ng g application playground

Within the directory projects/theme/src/lib/styles we will add the following content to index.scss.

$color: red;

And in order to include the style assets we need to update ng-package.json with an asset block like this:

  "assets": [
    { "input": "src/lib/styles", "glob": "**/*.scss", "output": "styles" }
  ]

If we build this project library like this:

ng build theme

We see that dist/theme/styles contains index.scss.

We can access the generated ts component ThemeComponent like this from the playground.

import { ThemeComponent } from 'theme';

When using @use to import the SASS index.scss module is it possible to use a similar namespace?

For example if we try this from the playground styles.scss module it fails:

@use `theme/styles` as t;

This is the error.

SassError: Can't find stylesheet to import.
  ╷
2 │ @use 'theme/styles' as t;

Now we could resolve by using a relative file import, but I'm curious whether there's a "Shorthand" way of doing it that uses the library name space?

答案1

得分: 0

目前不支持此功能,但有一个功能请求

英文:

Currently this is not supported, but there is a feature request for it.

huangapple
  • 本文由 发表于 2023年6月2日 12:50:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/76387206.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定