我有一个节点项目，它使用以下方法创建一个静态反应 SPA：

• 反应路由器
• 还原
• postcss
• 反应 CSS 模块

它当前为每个组件加载一个全局 css 文件和模块化 css。在开始时，我会获取一个全局主题变量，即“theme-1”或“theme-2”。我想根据主题 var 的值加载不同的 css 文件，名称相同但目录路径不同，例如：

如果主题是“theme-1”，则导入“ /css/themes/themes1/Component.css ”。否则，如果主题是“theme-2”，则导入“ /css/themes/themes2/Component.css ”。

有什么想法我能做到这一点吗？

请注意，据我所知，模块导入不能包含在 if/else 语句中。

我使用 PostCSS precss 插件有以下 CSS 声明：

但无论出于何种原因，该.woocommerce规则都没有被应用。任何线索为什么？我知道这是一个有效的选择器，因为如果我开始摆弄并删除一些其他声明，它实际上确实有效。

请注意，如果我像这样手动扩展每条规则，一切正常。因此，这是嵌套的问题：

根据要求，这里有一些 HTML。有很多html，所以我将展示基础知识......

我已经安装了以下软件包：

https://github.com/JeffreyWay/laravel-elixir-stylus

它正在工作。现在我想使用https://github.com/peterramsing/lost lost with stylus。所以我添加了它，但它不起作用。

我的package.json：

gulpfile.js

当我尝试 npm install 时，我收到错误：

当我运行 gulp 时，我收到：

我应该怎么办？

我不确定这是 PostCSS 问题还是 Webpack 问题。

这是我的 webpack 配置中的相关图像处理程序：

这是我庞大的 postcss 模块链：

这是我的输入和输出

这是我在 css 中的调用参考

我无法找出正确的设置组合来引用我的css（footer-mountains.png）中的图像并通过webpack dev选项（又名来自ram）加载它 - 我看到了正确的hashfilename变形但不知何故我缺少加载路径或其他东西。我对这个话题很困惑。欣赏任何见解。

如果有帮助，这是我正在使用的完整包： https ://github.com/koistya/react-static-boilerplate

我的 postcss 文件中有这段代码

好吧，我认为这可以通过使用 for 循环来缩短

但有一个问题。$graph_$i无法解决$graph_1，它只是保持不变$graph_$i。

这种情况有什么好的解决办法吗？

我一直在尝试使用 LESS 和 Autoprefixer 配置 webpack，但 autoprefixer 似乎不起作用。我的 css 或更少的文件没有自动添加前缀。示例： display: flex停留display: flex

我把我的 webpack 配置放在下面：

我无法弄清楚如何设置我的 webpack 以便能够在我的组件中使用 scss 模块，例如：

import styles from './ComponentStyles.scss'

到目前为止，我尝试将 webpack 配置为sass-loader一起使用，postcss-loader但没有运气：

注意isomorphic-style-loader是我使用的库，而不是style-loader由于服务器渲染要求，在其 github 页面文档中，他们实际上使用带有 .scss 扩展名的 postcss-loader，但在我的情况下，如果我遵循他们的示例，则不会编译 scss。

有一个非常棒的 postcss 插件，叫做 postcss-inline-svg。我一直使用它从一个来源加载不同样式的 svg 图标。

如果您还没有听说过，请务必在 Github 上查看： https ://github.com/TrySound/postcss-inline-svg

如果您已经熟悉该插件，您可能知道通过 svg-load() 加载时可以更改 svg 图像的填充。

我想知道，是否可以定义线性渐变以将它们加载到 svg 图像的填充中。

就像是：

这就是我在我的 HTML 文件中加载它的方式：

在此处下载测试文件： 文件

I'm using Gulp and have used the Gulp Autoprefixer standalone such as:

...but then I see the Gulp Postcss plugin which seems to wrap the usage of a non-gulp autoprefixer such as:

What is the difference?

您好，我一直在尝试使用 PostCSS，并且正在努力编写一个插件，该插件在找到某些 CSS 属性时会附加一条新规则。

我正在努力实现的目标……</p>

启动 CSS：

PostCSS 插件后：

每当我看到其中一个规则时，我都可以轻松添加新规则not-yet-standard-property-*……</p>

但是输出并不理想……</p>

理想情况下，新规则只会在遍历整个规则后添加一次，但 PostCSS 似乎不允许 walkRules 函数内部的条件，所以我不确定如何阻止它为它看到的每个规则创建新规则.

我已经链接到上述代码的演示。任何关于更好架构的建议将不胜感激，就像我之前说的，我对此很陌生。谢谢！

演示

编辑：已解决。非常感谢安德烈·西特尼克！我已将他的答案标记为正确，因为其中的概念是我所需要的。对于那些寻找完整解决方案的人，请参阅以下代码（和演示！）：

解决方案演示