问题标签 [postcss]

如何postcss在本地安装模块，并通过postcss-cli全局安装来使用它们？

例如：

如果我已经全局安装，或者两者都在本地安装，则此命令postcss-cli有效autoprefixer。postcss-cli但是，如果我已在全局和autoprefixer本地安装，它不起作用。

这个问题并不特定于 autoprefixer，因为 autoprefixer 将是一个模块，无论如何我都会在全球范围内安装什么。任何意见将是有益的。

这是我得到的错误，如果postcss-cli在全局和autoprefixer本地安装：

根据postcss 文档，我应该能够对 postcssResult对象执行插件，就像我对 CSS 字符串执行插件一样（使用Processor.process）。

不幸的是，这似乎不起作用。我在这里演示了这个“错误” （为方便起见，我还复制了下面的代码）。只需单击该链接，打开浏览器的控制台，然后单击“运行代码”即可执行测试。

我的问题是：因为这不起作用，我如何直接针对 postcssResult对象运行 postcss 插件？

演示问题的测试代码

首先，我需要 postcss、一个插件和一个测试工具

接下来我定义了一些输入 css 和我期望运行插件的输出

现在，测试本身：

1：正常使用，证明插件按预期工作

该测试通过：

2：使用文档中定义的方法直接在Result对象上应用插件

此测试失败：

3：再一次尝试，手动执行插件功能

该测试也失败了：

我正在尝试在 CherryPy 应用程序中设置 Webpack(PostCSS)。Webpack 似乎正在正确生成内联样式，以下是我在 webpack.config.js 中的加载器

{ test: /\.css$/, loader: "style-loader!css-loader?modules&importLoaders=1!postcss-loader" }

当我运行“webpack”时，它似乎从我的 stylesheets/main.css 文件中正确生成了“test-class”样式，内联在主要生成的 output.js 文件中......

exports.push([module.id, ".W_8vO1mwnWhjGJpClgHqm {\n /* color: $matt; */\n color: green;\n background: red;\n}\n", ""]);

然后将生成的 output.js 文件包含在我的 main.html 页面中的脚本标记中。但是，当我尝试使用上面生成的“测试类”时，应用它对元素没有影响。在 webpack 文档中，它提到了以下内容

// in your modules just require the stylesheet // This has the side effect that a <style>-tag is added to the DOM. require("./stylesheet.css");

我不清楚这是指哪个模块。任何见解将不胜感激。

编辑：使用完整的 webpack.config.js 更新

```

```

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

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

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

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

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

我正在尝试使用stylelint和stylelint-selector-bem-pattern插件对 BEM 样式进行 lint，但无法使其正常工作。

我的配置如下：

• 节点：5.11.0
• gulp-stylelint：^2.0.2
• stylelint-selector-bem 模式：^0.2.3

.stylelintrc

和一个用于测试的 CSS 文件

@alienlebarge/stylelint-config我从插件而不是从插件中收到错误消息stylelint-selector-bem-pattern

我已经使用 ModularCSS 和 webpack 启用了 postCSS：

这意味着我现在可以像这样导入“CSS 模块”：

组件/app.js

这将确保整个应用程序基于引导程序的“全局 css”，例如重置。

此外，在组件中，我可以清楚地定义它们对 Bootstrap 的依赖关系，例如：

组件/control.js

但是，语法className={Bootstrap.btn + ' ' + Bootstrap['btn-primary']}难以阅读且不易使用。

这个问题以前解决过吗？关于如何使其更具可读性和可操作性的任何建议？

我正在尝试 PostCss 并试图找到与 Sass 相当的功能。我坚持的一个功能是类似 Sass 的功能。

这是我的功能是Sass：

在 PostCSS 中，我可以编写这样一个返回单个 CSS 值的函数吗？

我使用 PostCSS响应式插件，我得到的生成代码如下：

http://codepen.io/umbriel/pen/WwLBxQ

在 Firefox、Chrome 和可能的其他现代浏览器中运行良好。但是Version 9.0.3，正如我链接的 Codepen 所证明的那样，野生动物园完全失败了。

有谁知道这是为什么？

编辑：我可能找到了罪魁祸首，似乎 vw 与 calc 结合起来是我尝试过的问题。有没有办法让它工作？

Im trying to import multiple scss files in my app.scss file but gulp is throwing an error:

gulpfile.js

Directory structure:

And gulp is throwing this error: