小编Ger*_*ros的帖子

我在带有 Webpack 的 Angular 项目中使用 CSS 模块。我已经用postcss-modules转换了.css和.scss文件中的类名。

然后使用posthtml-css-modules我更改了 html 元素中 class 属性的值，用于由 postcss-modules.

我可以说一切正常。

现在，我有一个新的挑战要解决。

Angular 有一项功能，允许您class 根据条件动态更改html 元素中的值：

https://angular.io/api/common/NgClass

例如，我可以这样做：

<div [className]="myVar ? 'myClass1' : 'myClass2' " >

如果myVar = true，则 html 元素将是：

<div class="myClass1" >

如果myVar = false，则 html 元素将是：

<div class="myClass2" >

就像我不知道myVar在编译期间的值是什么（因为 的值myVar取决于用户操作）我无法设置值<div css-module="myClass1" > 或<div css-module="myClass2" >为了散列myClass1or的类名myClass2。

但是（这是我的解决方案）...

如果我可以调用相同的函数[hash:base64:5] …

我使用postcss、postcss-css-modules和posthtml-css-modules在 Angular 应用程序中实现 CSS 模块。我还使用了@angular-builders/custom-webpack来实现这一点。

现在，我想对我的自定义 Angular 库做同样的事情。但是，我不能使用@angular-builders/custom-webpack，因为 Angular 库是使用ng-packagr构建的。

所以，@angular-builders/custom-webpack不能使用：https : //github.com/just-jeb/angular-builders/issues/356

另一方面，ng-packagr不支持postcss：https : //github.com/ng-packagr/ng-packagr/issues/1471

我已阅读，它可以延长汇总配置（就是使用编译器NG-packagr在构建结束）在NG-packagr：

https://github.com/ng-packagr/ng-packagr/blob/master/docs/DESIGN.md#rollup-config

但我没有找到任何文档来实现这一点。

有人知道怎么做吗？

我认为的其他解决方案，它使所有样式全局化并使用scss-bundle和 postcss编译它们，就像我在这里所做的那样：NodeJs Script that compiles scss files failed because of postcss rule for undefined variables

如果我可以使用lodash，我将能够用散列类名替换类名，就像这里建议的那样：在 JavaScript / TypeScript 文件中使用 [hash:base64:5]

但要做到这一点，我需要知道如何在ng-packagr的构建中调用lodash。

有人知道怎么做吗？

任何其他解决方案都非常受欢迎。 …

我有一个自定义角度库，我想使用postcss自定义该库的构建。

就像 Angular 库是使用ng-packagr构建的一样，我需要扩展rollup.config.jsng -packagr来自定义我的库的构建。

事实上，我想通过rollup使用postcss，就像这里使用的那样： https: //www.learnwithjason.dev/blog/learn-rollup-css/

我在ng-packagr的文档中看到可以扩展汇总配置： https://github.com/ng-packagr/ng-packagr/blob/master/docs/DESIGN.md#rollup-config

但是，我没有找到任何有关如何执行此操作的文档或示例。

有人知道该怎么做吗？

有人能给我举个例子吗？

提前致谢。

我正在使用scss-bundle导入scss文件并解析他的所有@import语句，以便稍后将其再次保存为scss文件。

这工作正常，下面是一个例子，看看它是如何工作的：

scss-bundle.ts

import { Bundler } from 'scss-bundle';
import { relative } from 'path';
import { writeFile } from 'fs-extra';

/** Bundles all SCSS files into a single file */
async function bundleScss(input, output) {
  const {found, bundledContent, imports} = await new Bundler()
    .Bundle(input, ['./src/styles/**/*.scss']);
  if (imports) {
    const cwd = process.cwd();

    const filesNotFound = imports
      .filter((x) => !x.found)
      .map((x) => relative(cwd, x.filePath));

    if (filesNotFound.length) {
      console.error(`SCSS imports failed \n\n${filesNotFound.join('\n - …

我将如何发出对象而不是原始数据类型？

我有一个const amount = { currenty: 'USD', total: '10.25' }; 我想发送给父组件的对象。

export class MyChildComponent implements OnInit {
     @Output() childEventEmitter: EventEmitter = new EventEmitter();
....
}

在发射器函数中

this.childEventEmitter.emit(amount); // 不工作

错误：{ currenty: 'USD', total: '10.25' } 类型的参数不可分配给字符串类型的参数