问题标签 [postcss-loader]

我的目标是在现有的 Angular 项目中使用 Material 和 scss 配置 Tailwind。我已遵循本指南，大多数事情似乎都有效。但是在项目中，我们有一个variables.scss文件，其中定义了多个变量，例如：

我们以组件样式导入变量：

但是，升级到tailwind后，当我们尝试编译Angular时，它会抛出以下错误：

我们能做些什么来修复这个错误？

所以今天我一直在尝试将 postcss-loader 从版本 3.0.0 迁移到 4.0.2

我注意到自版本 4.0.0 以来，他们添加了 postCSS 作为对等依赖项，因此我添加了 postcss 版本 7.0.27。我没有选择 8，因为我也使用“postcss-import”，这依赖于版本 7。这应该没问题，因为 postcss-loader 可以同时使用版本 7 和 8。

但是现在在运行时，我收到所有 scss 文件的相同错误消息：

Error: [object Object] is not a PostCSS plugin

由于消息不是真正的描述性，因此解决问题已成为一种真正的试错方法。到目前为止没有成功。

这是我的 webpack.config.ts：

我在 postcss-loader 的选项中尝试了几件事：

• 设置执行为真
• 将 sourceMap 设置为 true
• 将两者都设置为 false

要完整，这里是我使用的依赖项版本：

您是否在这里看到了问题或知道在哪里寻找？这将是一个帮助。

提前致谢

我正在使用 webpack、postcss、browserslit 和 autoprefixer。除了自动前缀，一切都很好。

当我写这个css代码时，输​​出是一样的。我在https://autoprefixer.github.io/检查了我的 .css 代码和 browserslist 配置 我的配置文件是真的吗？或者我哪里错了？

但它必须是这样的：

这是我的webpack.config.js

和.browserslistrc

我试图在 Webpack 中生成两个单独的 css 表：style.css 和 style-prefixes.css 仅带有前缀。目前，它会生成一个包含所有样式和前缀的文件。我在 webpack 中的加载器：

我将不胜感激。

我正在使用 webpack 5 和最新的 css/postcss/sass 包。现在我得到了错误

如果我删除 postcss 加载程序，它可以工作。

那是代码

我用craco来自定义配置。我想用lessmodule和postcss一些postcss插件，但是遇到了很多问题

craco.config.js

它似乎没有生效。

然后我尝试以不同的方式使用它

它仍然不起作用。接下来我该怎么办？

我正在使用带有最新 CkEditor 5 和 postcss-loader 的最新 webpack 4（不是 5）。当我使用 postcss-loader 3.0.0 时，一切都很好。将其更新到 4.1.0 后，我收到此错误消息：

“ValidationError：无效的选项对象。PostCSS 加载器已使用与 API 模式不匹配的选项对象进行初始化。选项具有未知属性“插件”。”

我的 webpack.config 是：

所以是的，我有插件，但这是必须的。我什至不知道插件和 postcss-loader 4.1.0 有什么问题。

请指教！

我正在尝试构建一个 webpack 配置来转换我的 sass 并利用 postcss autoprefixer 插件。

在研究并尝试了各种解决方案之后，我提出了以下设置：

webpack.config.js：

postcss.config.js：

当我运行它时，我收到以下错误：

这是有道理的，因为 postcss 没有配置插件来正确处理导入。postcss-loader然后我尝试在 postcss 加载器处理供应商前缀之前更改and的顺序sass-loader，让 sass 加载器处理导入和其他非标准 css 功能。所以我的设置改为：

但后来我仍然收到与之前描述的相同的错误。

如何正确配置此设置？

我正在将 Tailwind 添加到一个 Angular 项目中，我之前在新设置上已经做过，没有问题。这里的不同之处在于我将我们旧的基于引导程序的主题添加到这个项目和 Tailwind。我们的想法是，我们将在未来几个月内慢慢迁移到 Tailwind。

当我单独添加 Tailwind 时，我对以下tailwind.config.js文件和附加webpack.config.js文件没有任何问题：

所以这些配置文件非常适合新项目。但是，当尝试在单独的主题之上添加 Tailwind 时，这不起作用。我将主题styles.scss文件添加到angular.json该项目的配置中：

然后服务于项目，却得到如下错误：

我尝试将以下exclude数组（也只是一个项目）添加到文件中的postcss-loader配置中webpack.config.js，但它没有解决任何问题：

必须有一种方法可以告诉postcss-loader从哪里导入这些文件以便它按预期工作，或者忽略这些路径并让它们不理会。这就是我正在寻找的，但我对 Webpack 或 PostCSS Loader 不是很有经验。

编辑

webpack.config.js稍微更改文件，如下所示：

再次构建项目，但 Tailwind 样式已经消失。基本上我所做的只是使plugins属性成为返回数组的函数，并为 postcss-import 配置设置根路径。

我正在尝试在我的 PostCSS 上使用 TailwindCSS，以及作为预处理器的 Sass。每当我尝试启动我的项目时，都会收到此错误：

我有这些配置：

webpack.config.js

postcss.config.js