问题标签 [postcss-loader]

问题

我构建了一个 postcss 语法（解析器、标记器、字符串化器，整个工作），以便我可以让 postcss 识别 css 中的 hubl 语法（hubspot）。

Hubl 基本上是 Jinja，并且在 hubspot 上允许在 CSS 文件中使用。

如果我将我的 postcss 语法与纯 postCSS（无 webpack）一起使用，一切都会按预期工作。但是，当我将它全部包装在 webpack 中并使用 postcss 加载器时，似乎 postcss 运行了两次。

第一遍使用我的 postcss-hubl 语法运行，第二遍使用本机 postcss 语法。这导致我的 css 文件被覆盖并且没有按预期加载。

设置

postcss.config.js

webpack.config.js

样式.css

预期产出

索引.css

实际输出

我的语法扩展将 hubl 表达式视为注释，并将注释作为构建过程的一部分删除。但是，当在运行 css-loader 时使用原始语法时，这些注释会重新添加。

在调试过程中，我在我的插件和 css-loader、postcss-loader 和 postcss 的本机节点模块中记录了一大堆东西，以便我可以更好地理解事件流。

流日志

关于如何强制 CSS 加载器使用与 postcss-loader/postcss 相同的语法的任何建议？我什至在问正确的问题吗？我应该在哪里解决这个问题？

我又遇到了另一个问题。我正在将 Angular App 从 10 更新到 11。它已更新，但是当我点击 ng serve 时，我遇到了这个问题。它与 PostCss 有关。该项目内部有顺风。

所以我一直在研究它，然后我来到了 webpack，这似乎是问题所在。这是我的网络包：

我可以提供我的包裹。

如果您有建议，我将很高兴看到它。非常感谢。

我想在我的 nuxt 项目中包含我购买的现成的前端模板，但它给出了一个错误。

我在终端屏幕上分享了错误以及我在附件中添加的文件。

终端错误

添加文件和文件夹

索引 sayfamda eklemis oldugum dosyalari 进口 ettim。

页面/index.vue

我没有在我的默认页面上做任何事情。

布局/default.vue

目前在使用 react 和linaria构建的站点存在跨浏览器的 CSS 兼容性问题。Linaria 本质上是一个样式化组件库，它在构建步骤中将其 CSS-in-JS 提取到 CSS 文件中。

我相信的解决方案是使用 PostCSS。然而，由于我是这个工具的新手，我正在尝试研究如何将它正确地集成到我的 webpack 配置中。特别是要确保它在提取 linaria 样式后运行。

这两个问题是：

1. 我是postcss.config.js正确的，因为我不确定我是否应该同时使用autoprefixerand postcss-preset-env。此外，.browserslistrc针对最新版本的我是正确的：Safari、Edge、Chrome 和 Firefox。
2. 我webpack.config.ts是否正确确保 postcss 在我从 linaria styled-components 提取的 CSS 上运行。

请参阅下面的相关配置文件。

谢谢。

webpack.config.ts

postcss.config.js

.browerslistrc

考虑这个简化的 webpack 示例

webpack.config.js

postcss.config.js

文件.css

输出是

.test2为什么不处理color-mod() in ？我有正确的插件顺序，其中 postcss-custom-properties 首先处理变量，然后 postcss-color-mod-function 应该处理 color-mod() 但它没有被处理。

解决方案是仅在 webpack 插件部分而不是在 module.rules 部分中使用 postcss-color-mod-function，但是在监视或开发服务器热重载期间使用 postcss-color-mod-function 处理整个捆绑包会对性能产生负面影响。所以我希望它可以在 module.rules 部分按预期工作。谢谢。

我的 webpack 配置中有带有 cssnano 插件的 postcss。这是配置的一部分：

我发现 postcss 转换适用于每个 scss/css 模块。例如：

但是如果还有一个 scss 文件：

由于配置和 webpack 的工作方式，这是有道理的。但是如何将 postcss 转换应用于整个 CSS 包？我想要以下结果：

我已经尝试过了（有点成功的希望）：

显然，这是行不通的。

尝试手动编译和捆绑反应应用程序

当我在 JS 文件中导入我的 scss 文件时弹出此错误

这里有什么问题？如果我不导入 scss 文件，它会很好。我基本上需要让我的项目一起编译，导入所有必要的文件

附加配置文件

由于 vurnabilitys，我刚刚将我们的项目从 Angular 10.1 更新到 13，现在当我尝试为该项目提供服务时，出现以下错误：

./src/styles/global.css - 错误：模块构建失败（来自 ./node_modules/mini-css-extract-plugin/dist/loader.js）：HookWebpackError：模块构建失败（来自 ./node_modules/postcss-loader /dist/cjs.js): SyntaxError (13:3) C:\ProjectPath\src\styles\base\reset.scsstext-blue类不存在。如果text-blue是自定义类，请确保它在@layer指令中定义。

目前已安装 postcss 8.4.5、postcss-import 14.0.2、postcss-loader 4.0.3、postcss-nested 5.06 和 tailwindcss 3.0.13 这是我的 webpackConfig（https://pastebin.com/bsuD11b7），这是我的角度.json（https://pastebin.com/hfm7SENi）。

如果需要更多信息，请询问。

我们正在尝试将我们的 React 应用程序的一部分构建到一个库中以供业务合作伙伴使用。最初的 React 应用程序是一个 Create React App 应用程序，我们试图在不弹出应用程序的情况下实现这一点。

我们已经为应用程序创建了一个新的入口点，并且我们正在使用 Webpack 构建一个捆绑的应用程序。我们目前遇到的问题是，@value当我们尝试在组件中引用它们时，值是未定义的。

编码

侧边栏/styles.module.css

相关组件代码

webpack.config.js

错误

如果我们忽略警告，我们会收到 webpack 警告和运行时错误。

webpack 构建警告

运行时错误

问题

据我了解，postcss-modules-values应该对此有所帮助，但是，我不确定我们是否正确配置了它？或者它配置正确并且我们在这里做错了什么？

我从事这个项目大约有四个月了。在开发版本中完全可以，但是当我构建项目并将其上传到服务器时，我的一些样式将不会被应用。

有关更多信息，我在组件中都导入了样式。

和资产 css 文件。 assets\css\style.css

我不知道这样做对不对？

我第一次输入npm run buildvs code 终端时收到此错误

第一次 npm 运行构建

但第二次它将在几个警告内构建项目。

当它在第二次尝试后构建时npm run build

后npm run build

当我输入nuxt buildvs code 终端时，我收到此错误

使用 nuxt 构建

如果有人可以帮助我或分享相同的经验，我真的很感激