问题标签 [postcss]

我想允许用户在我的网站上选择主题，他们将通过下拉菜单来完成。不过，我目前在不编写愚蠢代码的情况下无法弄清楚如何支持此功能。

我目前使用 css-modules 和 postcss 来让我的生活更轻松。Webpack 用于将所有内容捆绑在一起。我在开发过程中使用热重载，在此期间我使用样式加载器。

完整配置如下所示

解决方案 1

在 body 标记上放置一个类名以确定加载的主题。然后用于从每个组件 css 中选择正确的主题。这很乏味，我想避免，但它看起来像这样：

这很快就会变成难以扩展和不可维护的东西，这就是我想避免它的原因。

解决方案 2

为 css 生成预先主题的静态包。当用户请求/main.css时，服务器上的处理程序确定要发送哪个主题（可能是查询字符串）并发送它们theme1-main.css或theme2-main.css类似的东西。问题是我不知道如何支持开发环境。

这样做的好处是我的 css 文件不需要任何额外且难以维护的逻辑：

解决方案 3

使用本机 CSS 变量。然后可以在运行时更新这些，这将反映已经加载的 css 并在生产和开发环境中正常工作。我的组件也看起来像（或类似于）解决方案 2。这里的问题是它们本身并没有得到广泛的支持，而且我不确定是否有任何值得研究的 polyfill 可以为我做这种事情。

总而言之，这些是我的想法。我还没有得出任何明确的结论，并希望得到所有关于如何解决这个问题的反馈。也许我在想这一切都是错误的，并且有一种更好的方法来做我想做的事情。

提前致谢！

我正在使用 classNames 在 react 中设置我的组件的样式，但是如果我使用react-select之类的组件，那么如何导入样式react-select/dist/react-select.min.css并在我的组件中使用它。

这是我的一段代码，我的 react-select 没有样式。如何做到这一点？

我想使用 postcss-loader 和 css 模块将一组样式传递给 React 组件。我用于编译 css 文件的 webpack.config.file 如下所示：

我的 React 组件文件如下所示：

每当我只将一种样式传递给 className 时，它​​会正确加载它，但是当我传递一个数组时，它不会解析其中的任何一个。相反，它将它与编译类名上的逗号连接起来。

如何将多个样式传递给一个元素？

我正在尝试将 webpack 设置为具有编译通过，它会扫描一个文件树中的所有 css 文件，然后生成一个 css 文件，其中包含捆绑、自动前缀和最小化的所有样式。

我无法让 autoprefixer 插件工作。

这是相关的 webpack 配置部分：

当我运行 webpack 时，我将所有文件压缩到 bundle.js 中，并正确提取到单独的styles.css文件中。但未应用供应商前缀。

我正在使用这个类来测试前缀：

我试图改变对 ExtractTextPlugin.extract 的调用，就像ExtractTextPlugin.extract('style-loader', ['css-loader', 'postcss-loader'])在其他帖子中看到的那样，但它根本没有帮助。

有任何想法吗？

我没有得到这些设置的前缀。Cssnano 并写入 style.css 正在工作，但没有从我的 sass 添加到 css 的前缀。

我刚开始使用 webpack，所以也许我只是没有得到它。

配置：

我的 webpack.prod.config 正确构建资产时遇到问题，或者我的 JS Babel 配置可能存在问题。

我可以让它与内联我的 CSS 的开发版本一起工作，但是当我尝试将它组合到一个 CSS 文件中进行生产时它不起作用。无论发生什么，它都可以在 Dev 中通过 import './filename.css' 在每个相应组件中直接注入 CSS。它也可能是 JS，但无论哪种方式，当我为 prod 构建时，CSS 都不能正常工作，JS 也不能正常工作。不显示所有 React JS 组件和其他 JS，仅显示来自 CDN 导入的静态 HTML 和 CSS 样式。当我单击 Webpack 注入的脚本标签中的 URL 时，它们只会将我引导到同一页面，而不是我觉得奇怪的 JS 或 CSS 源。JS 和 CSS 在 Build > Static > JS + CSS 输出中看起来是正确的。有时我

要么是那个，要么是我的 JS 坏了，没有正确构建页面。不在我的生产版本中（与部署到 Heroku 时相同的版本）。我从一个 create-react-app（已退出）开始，添加了 Express、preCSS（用于 SASS 之类的预处理）、react-bootstrap 和其他一些东西。

这个项目有点乱，因为它是我作为新 Web 开发人员从使用静态 HTML+CSS 过渡到使用 React、JS 和 Bootstrap 的学习工具（当我们将事物一起转换为纯反应）。它以前构建没有问题，但自从我开始使用 postCSS + preCSS 时，它不再工作了。

这是我正在使用的一些主要包/库。- jQuery（CDN 脚本标签） - BS3（CDN 脚本标签，.js，.css） - React-Bootstrap - React-Overlays - Babel - postCSS - preCSS - ExtractTextPlugin

预先感谢您的帮助。

我在控制台中遇到 HTML + 错误

[![正在生成 HTML][1]][1] [![控制台错误][2]][2]

Webpack.config.prod.js

构建.js

我用http://cssnext.github.io设置了 postcss 解析器，并试图找出一种方法来设置variables.css文件以包含我所有的主题设置。

到目前为止variable.css看起来像这样，有几个 var

我将它导入到我想要使用这些变量的其他文件中，所以@import './variables.css'或类似的，然后在该文件中使用它，background-color: var(--color-white)例如，但是我得到以下警告：

变量 '--color-white' 未定义并且没有后备使用 [postcss-custom-properties]

拥有这个：

样式.scss：

gulpfile.js：

得到：

想：

所以我想有背景：#45678a; 如果线性梯度不支持（例如 ie8）。
是否可以使用 autoprefixer 或其他一些“自动...”不写额外的背景属性？谢谢。

Less 有这个方便的选项，引用的导入文件将仅用于解析变量，但不会被内联。有没有办法对postcss-import或任何其他类似的 PostCSS 插件做同样的事情？

下面的代码块是这种行为在 Less 中的工作方式。我想用 PostCSS 实现类似的行为。

我试图通过组合一个简单的项目来学习 Webpack 的优点，但在加载样式表时遇到了问题。我正在使用 Node v4.4.4 和 Webpack v1.13.1。

这是我的 Webpack 配置：

我的 index.js 文件只有一行：require('./styles/app.css');

这是我的 app.css 文件：

这是错误：

这个错误的原因是什么，我应该如何解决它？