标签: postcss

我在带有 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。

有人知道怎么做吗？

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

我克隆了这个 repo https://github.com/tailwindcss/setup-examples/tree/master/examples/nextjs然后我更新了tailwind.config.js

  theme: {
    extend: {
      color: {
        primary: "#730000",
        secondry: "#efefef",
      },
    },
  },
  variants: {},
  plugins: [],
};

然后运行命令postcss css/tailwind.css -o generated.css 终端会引发错误TypeError: Invalid PostCSS Plugin found at: plugins[0] ，任何人都可以帮我修复它。谢谢你。

我正在尝试使用 purgecss 删除任何未使用的 css，尤其是 Bootstrap 中未使用的 css。使用 Purgecss 设置，我所有的 css 都被删除了，只保留了内联样式。这意味着 purgecss 正在删除所有 css 类的样式，而不仅仅是未使用的样式。我想让我的配置正确，以便只删除未使用的 css 样式。

由于我的 React 应用程序也使用 Post-css，我正在尝试使用postcss-purgecss插件，并按照该链接中的说明进行设置。

这发生在开发和生产模式中。

你可以在这个 github repo 的这个分支上测试这个问题

您可以在此 url https://purge-css-failing.netlify.app/查看发生的结果

postcss.config.js

const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  plugins: [
    purgecss({
        content: ['./src/**/*.html']
    }),
  ]
};

webpack.config.js

const purgecss = require('@fullhuman/postcss-purgecss');

module.exports = {
  plugins: [
    purgecss({
        content: ['./src/**/*.html']
    }),
  ]
};

我正在使用Webpacker为 Rails 应用程序构建资产。我想为来自 3rd 方 CSS 框架的所有类名添加自定义前缀。例如，来自Bulma的样式应该转换为bulma_button用作选择器，而不仅仅是button.

postcss-prefixer是一个 PostCSS 插件，似乎可以像我想要的那样向样式表添加自定义前缀。但是，我仍然需要使它仅作为来自特定 NPM 包的类的前缀。

这就是我在为 3rd 方样式添加前缀的路径上卡住的地方：如何将 PostCSS 插件仅应用于某个node_modules目录并将结果导入到我的入口点样式表中？我试图打破了由Webpacker提供的装载机管道和操纵test/ include/exclude的WebPack配置值，但似乎我只能成功的影响是被编译包括我的风格，我不希望前缀整个样式表。

任何有关特定 PostCSS 插件问题的帮助或为第 3 方 CSS 加上前缀的总体目标表示赞赏。如果认为有用，我将链接到示例应用程序。

我正在尝试使用 Svelte.js 和 Ionic v4 构建一个移动应用程序。

1）我得到了苗条的模板。

2) 使用 npm install @ionic/core@latest --save 安装 ionic。

3) 安装 postcss 并在 global.css 中导入 @ionic css

Rollup 正在提取 @ionic css，但它的工作方式似乎有问题。离子成分是可访问的，但我什么也看不到。未正确应用 css。

有没有人设法让 Svelte 与 Ionic v4 一起工作？或者至少，带有一些香草 js 的 Ionic？

我有一个自定义角度库，我想使用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

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

有人知道该怎么做吗？

有人能给我举个例子吗？

提前致谢。

我最近将我的代码库从 Angular 11 更新到 12，在那之后，我无法部署我的代码。我可以运行ng build并且ng serve它可以完美运行，但是，当我运行时，ng build --prod我不断收到以下错误，可能是因为对 prod 版本进行了优化（缩小）：

该文件D:\Code\Airbox\frontend\styles.670357240e7c04682d1d.css:9031:1不存在，它显然是由部署脚本创建的，但我无法看到或访问它。我试图从我的全局 css 文件中删除注释和导入，但问题一直在发生。

我在互联网上找不到任何解决方案，我不知道发生了什么或如何找到解决方法。

如果这是一个明显的问题，我很抱歉，这是我第一次尝试构建组件库。

我正在使用 Tailwind CSS 3 构建 React 组件库。当我使用 Storybook 运行组件时，它们会按预期显示。但是，当我与 Rollup 捆绑时，会应用类名称，但 CSS 不包含在构建中。

这是我的tailwind.config.js文件：

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

我的rollup.config.js文件：

import babel from 'rollup-plugin-babel';
import external from 'rollup-plugin-peer-deps-external';
import resolve from '@rollup/plugin-node-resolve';
import postcss from 'rollup-plugin-postcss';
import { terser } from 'rollup-plugin-terser';

const packageJson = require('./package.json');

export default [
  {
    input: 'src/index.js',
    output: [
      {
        file: packageJson.module,
        format: 'esm',
        sourcemap: true,
      },
    ],
    plugins: [
      postcss({
        config: …

我正在尝试在 docker 中使用 Bun 代替 npm。我有 Bun docker 映像，但是当我尝试在容器内构建时，错误显示它找不到 postcss 配置。我将 package.json 设置为 module，并在根文件夹中有 postcss.config.cjs 。

#9 0.415 $ bunx --bun vite build                                                                                                                                 \n#9 0.895 vite v4.4.9 building for production...                                                                                                                  \n#9 0.913 Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /tmp/frontend): [EBADF] Bad file descriptor                                   \n#9 0.913 undefined\n#9 0.913    code: "EBADF"\n#9 0.913  syscall: "fstat"\n#9 0.913    errno: -9\n#9 0.913 \n#9 0.913 Failed to load PostCSS config: Failed to load PostCSS config (searchPath: /tmp/frontend): [EBADF] Bad file …