相关疑难解决方法(0)

我在带有 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自定义该库的构建。

就像 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

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

有人知道该怎么做吗？

有人能给我举个例子吗？

提前致谢。

我正在编写一个 Webpack 插件，该插件应该用 Webpack 生成的 CSS 文件列表替换部分 JS 代码。对这个 JS 代码进行成像：

ReactWebComponent.create(<App />, 'react-web-component', { injectReactWebComponent: true });

我想更换injectReactWebComponent: true零件

injectReactWebComponent: '<link href="static/css/main.cacbacc7.css" rel="stylesheet">'

而那个链接标签是一个由 Webpack 生成的文件。

我的（某种工作）代码如下：

ReactWebComponent.prototype.apply = function(compiler) {
  compiler.plugin('emit', function(compilation, callback) {
    const cssFiles = Object.keys(compilation.assets)
        .filter(fileName => /\.css$/.test(fileName));

    const jsFiles = Object.keys(compilation.assets)
        .filter(fileName => /\.js$/.test(fileName));

    const cssLinkTagsAsString = cssFiles
        .map(fileName => `<link href="${fileName}" rel="stylesheet">`)
        .join('');

    jsFiles.forEach(fileName => {
      compilation.assets[fileName].children.forEach(child => {
        if (child._value) {
          child._value = child._value.replace(/injectReactWebComponent\s*:\s*true/g, `injectReactWebComponent: \'${cssLinkTagsAsString}\'`);
        }
      });
    });

    callback(); …

我正在使用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 - …