问题标签 [cssnext]

我正在尝试使用变量来使用 CSSnext 插件指定断点。

目前我的CSS看起来像这样：

但是当我尝试运行它时，我在控制台中收到以下警告：

如果我将 var(--screan-md-min) 替换为实际像素，则此代码可以正常工作。我确信这只是语法问题，但 CSSnext 文档并没有很清楚地说明变量的使用。

我无法将我的 webpack 配置从使用现已弃用的 cssnext 和 cssnext-loader 转换为 postcss-cssnext 和 postcss-loader。Doc 清楚地表明我试图重新创建的功能已被委派给特定插件的功能，但我似乎无法让事情正常工作。这方面的一个例子是 css 变量。

我当前的工作 webpack 配置是这样的：

...插件导入

...加载程序配置

...postcss 配置

问题：

我交换了我的 cssnext 导入以指向新的 postcss-cssnext 模块，并添加到现在需要的模块中来处理我的 css 变量（postcss-custom-properties）。我还删除了 cssnext-loader 并假设 postcss-loader 可以处理事情？？？

...插件导入

...加载程序配置

...postcss 配置

我可以看到我所有的样式都被渲染到页面上，但是没有一个 css 变量被评估过。中心问题似乎与“cssnext-loader”的使用有关。如果我重新添加它，变量就会起作用。我确实玩过 postcss-import 和各种配置迭代，但似乎没有任何效果。有人知道我做错了什么吗？如何让 postcss-cssnext、postcss-loader、css 变量和 webpack 一起工作？

我正在使用postcss-cssnext并在我的 webpack.config 中删除了 autoprefixer

并包括cssnext。我知道 cssnext 已经包含 autoprefixer，所以我们不需要两者都包含。我只是想知道如何将browserslist传递给 cssnext？这是我目前拥有的：

我只是想知道使用这些 cssnext 自定义属性以及反应中的 css 模块的最佳方法是什么。

有没有办法跨模块共享这些？

编辑：***好的，我试过了，认为它有效但没有

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

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

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

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

在我正在处理的一个项目中，我们使用带有postcss(alsopostcss-cssnext和postcss-include) 的 css 模块。我们还将引导程序作为全局提供的依赖项。

在给定的组件中，我确实有一个按钮的自定义类。所以我的按钮有以下类：btn btn-custom.

根据要求我想修改按钮处于活动状态时的外观。对于该引导程序具有以下选择器：.btn.active, .btn:active. 覆盖伪类是容易的部分。不过，这.active门课是棘手的地方。

在我的 css 文件中，我尝试了几种方法来处理这个问题，但似乎都没有。以下是我尝试过的一些事情：

有没有人知道如何实现这一目标？

我正在使用 css-modules 和 postcss-cssnext ，特别是它的 postcss-custom-properties 功能

我也在使用 react-boilerplate ( https://github.com/mxstbr/react-boilerplate/ )，这个非常好的样板带有这些模块

我的文件夹结构是：

应用程序/styles.css

我想在 App/styles.css 中使用这些变量（或者我很乐意在其他地方定义它们，在这种情况下我该怎么做）在其他容器和组件中

我已经尝试过（用于在 css-modules 中使用）

主页/index.js

HomePage/styles.css -- 方法一

HomePage/styles.css——方法2

什么是最优雅的解决方案？我想将所有变量放在一个文件/一个地方，并在所有 css 文件中很好地使用它们

我还看到了variablespostcss-custom-properties https://github.com/postcss/postcss-custom-properties#variables。但我不确定如何在使用 postcss-cssnext 的 webpack 定义中使用

webpack.dev.babe.js - 如何将 VARIABLES 选项放在这里

我目前正在构建一个大型 React 应用程序。CSS，从来都不是我的强项。但是现在 CSS 有了 React 的 sass / cssNext / inline 样式。我一直在将 BEM 与 sass 一起使用，但随着我的其他应用程序变得庞大，即使它开始崩溃。尤其是当您能够“重新皮肤”或“主题”主配色方案之外的页面等时。

所以 - 有人可以指出一种经过验证的方法来创建带有反应的 css，它可以很好地扩展，并且当人们想借用我的组件时允许定制主题。例如，

或者甚至是整个应用程序在某个时候都可以换肤的想法。我知道这是一个非常基础的问题，但是每当我构建项目时，我的痛点似乎也是 CSS ——所以我想知道什么是真正有效的。

吞咽文件：

我在让 autoprefixer 工作时遇到问题。我正在对一个元素进行转换，但我没有看到任何供应商前缀被添加。显然对于 postcss-cssnext，autoprefixer 应该包含在其中，所以我通过它传递了选项。我尝试过常规的自动前缀，也没有运气。运行监视任务时，我在命令行中没有收到任何警告。

更新 通过将 autoprefixer 移到最后，我使用了与 cssnext 相同的语法使其工作。但是，如果我可以完全停止使用 autoprefixer，我会很高兴，因为无论如何它都应该包含在 cssnext 中。我仍然不确定该怎么做。

我有一个variables.css包含 CSS 变量的文件:root{}

现在每次我需要在.css我使用的另一个文件中使用它时：

@import './path/to/variables.css'.

我想知道是否有一种方法variables.css可以在全球范围内使用，而无需每次需要时都导入它。

我尝试customProperties在cssnext插件上使用该选项，但将 css 编译为 js 对象时出错...
我正在使用Reactwithwebpack 1和 as postcss 插件，我有import、和.mixinscssnextnested

谢谢