问题标签 [postcss]

我正在使用css 模块和post-css。我添加了post-css-simple-vars插件

颜色.css

在我的button.css文件中，如何使用组合以便可以重用变量colors.css？

按钮.css

使用CSS Modules，如何在不复制样式声明的情况下将全局实用程序类应用于多个元素？

例如，这是一个没有 CSS 模块的 React 组件。相关行是div有两个类：widget和clearfix...

.clearfix是一个全局实用程序类，我想将其应用于整个应用程序的许多元素：

我见过各种导入.clearfixCSS 模块的方法，但在每种情况下，样式声明都会为应用类的每次出现重新定义。这是一个例子：

我只是想设置 PostCSS 并将其集成到我最近的工作流程中。但不知何故，我似乎没有得到它的工作。

我正在使用 A Mac 和 gulp 作为任务运行器。

这是我开始监视任务时遇到的错误：

类型错误：$.postcss 不是函数

这就是我的 gulpfile.js 的样子：

出了什么问题？

我在我的 gulpfile.js 中运行以下内容

运行 gulp 样式后，我得到了这个

当我去检查我的 style.css 文件时，它是空的。我不确定我做错了什么。我已经运行 sass -trace --watch style.scss:style.css 并且效果很好。我不知道在这里做什么？

谢谢你

我只是第一次尝试使用 autoprefixer，但任务只是挂起并且没有错误输出，因此很难调试。

我安装grunt-postcss并autoprefixer按照autoprefixer github 页面上的说明进行操作：

这增加了我的 package.json"autoprefixer": "^6.2.2"和"grunt-postcss": "^0.7.1"

我的 Gruntfile.js 看起来像这样：

这似乎是一个非常简单直接的设置，但正如我所说，每当我运行grunt postcss该过程时，都会以零反馈挂起。

我已经尝试过添加.postcss到该require行，卸载autoprefixer和安装autoprefixer-core（尽管这个不仅挂起，而且还告诉我它已被弃用......），玩弄设置......但没有什么能让它变得更好。它总是挂起，没有任何反应。

任何帮助将不胜感激，因为我认为一旦我得到这个工作将成为我的项目中必须的;）

我第一次尝试将 grunt-postcss 与 autoprefixer 一起使用，但 css 没有得到前缀。我确实收到了消息

但没有任何前缀。

test.css为了确保问题不是我的 css 我创建了一个名为

并添加了不同的浏览器组合来尝试触发前缀，但无济于事。

这是任务现在的样子：

任务注册为

将“ .postcss ”添加到该require行没有任何效果（我已经看到这里和那里使用过），也没有将files属性替换为

如果我删除 'prefixed' 文件夹并运行 grunt，该文件夹会被创建并且新文件在那里，只是根本没有前缀。

这是一个错误吗？难道我做错了什么？

提前致谢！:)

我正在尝试从 Sass 迁移到 postCSS 并测试 postcss-simple-vars gulp 插件。

我正在使用 Webstorm IDE，它会在 .scss 文件中自动使用 javascript 样式的注释 (//)，所以我的非块注释都是 // 注释，而不是 /* */。

postcss-simple-vars 会在所有注释中抛出错误 // 即使将静默选项设置为 true。

这是我的吞咽任务：

我错过了一些非常明显的东西吗？有没有办法让 postcss-simple-vars 忽略 // 样式注释？

我是如何解决的：

我用 gulp-replace ($.replace) 替换了所有 // 注释为 /* */ 注释。

我在为PostCSS创建插件时遇到问题。

要了解我想要做什么，请查看以下代码：

这是我想做的。

如果未设置按钮边框，那么我希望有一个默认值：

但是，如果设置了按钮边框，那么我想使用按钮边框中设置的值。在上面的例子中，这将是：

我想我会通过设置一个变量来做到这一点，但我认为我的范围有问题。这是我尝试过的代码：

知道我做错了什么以及如何做对吗？

谢谢，

摩西

我正在学习如何使用 postcss-bem 生成 bem 样式的 css 文件，但我想知道是否有一些像 CSS-Modules 或 Postcss-JS 这样的包，我可以用它来执行以下操作：

我在 CSS-Modules 和 Postcss-JS 的文档中发现了这个特性，但是当我尝试使用 webpack 的 postcss-loader 和 postcss-JS 来解析 postcss-bem.css

加载器：["style-loader","css-loader","postcss-loader?parser=postcss-js"]

但我得到了这样的错误

模块构建失败：SyntaxError: Unexpected token ILLEGAL

我做错了吗？

我对使用 Node.js 和使用 CSS 后处理器非常陌生。在阅读了几篇文章后，我设法安装了以下内容：

1. Node.js（包括 npm）
2. 吞咽
3. 后CSS
4. Pxtorem（Gulp 的 PostCSS 插件）

我想要做的是让“pxtorem”插件将我的 px 单位转换为以下 CSS 属性的 rems：字体大小、边距、填充、边框、宽度、高度等，并在新的 CSS 样式表中输出结果.

问题：我究竟需要在我的 gulpfile.js 中输入什么才能使其工作？

重申一下，我在输入变量和要求方面是全新的，并且一直在关注视频和博客示例，其中没有一个专门具有将像素转换为 rems 的正确公式（因为 PostCSS 有很多插件）。

这是我目前在我当前的 gulpfile.js 中拥有的内容：

以上内容本质上是在我的“css-1”文件夹中获取我的“styles-1.css”样式表文件，并在我的“dest”文件夹中复制它。我根据我正在阅读的一篇文章输入此代码以了解 PostCSS 的工作原理，但显然它不是将像素转换为 rem 的正确代码。

PS 我目前使用的是 Windows 10 操作系统。