问题标签 [postcss]

我想要做的只是拥有一个可以监视和自动为我的 css 添加前缀的工具。之前我用的是pleeease.io，对我这种初学者来说非常简单，通过npm安装后，我需要做的是创建一个选项文件（.pleeeaserc），然后执行

之后，我可以专注于我的 css，每次我对我的 css 文件进行更改时，它都会被处理并输出。

不幸的是，当我这样做时，作者似乎已经停止维护它

在我的新服务器上，我遇到了很多错误并且安装失败。

我想我是时候学习如何直接使用 autoprefixer 了，我相信 pleeease 将其集成为它的依赖项之一。

但是，我发现学习曲线对我来说有点太多了：要使用 autoprefixer，我需要学习 PostCSS；PostCSS 通常与 Grunt 或 Gulp 一起运行；要使用任务运行器，我需要了解一些关于 npm 和 node.js 的知识。我知道这些都是有用的工具，可以节省我大量的时间，有了它们，我可以做的不仅仅是自动前缀。稍后我将深入研究它们，但在我目前的压力下，我真的需要一些捷径，比如 pleeease 来启动和运行 autoprefixer，而不必消化所有关于 PostCSS 的文档和文章。我希望我能做类似的事情

在我的scss文件夹下，每次我更改并保存时，都会生成input.scss一个文件。output.scss

所以我有一些问题，我努力学习 PostCSS 和/或让 autoprefixer 工作尽可能简单：

PostCSS1）为了澄清，和之间的关系是什么PostCSS-cli？后者是依赖于还是包括前者？

2）安装后者是否仅启用postcss在命令行界面中使用命令的能力？

3）我做了npm install -g postcss-cli，但我仍然不能使用postcss命令，我做错了什么？

4) 要查看文件更改并自动编译，我是否需要使用 Grunt 或 Gulp 等任务运行器以及 PostCSS？

npm install postcss5)和有什么区别npm install grunt-postcss？

我刚刚开始在 Webpack 中专门使用 PostCSS。当使用postcss-import内联外部样式表时，我看到它的选项允许我们配置插件和转换器以应用于导入的源，但我有点困惑它如何与为主要 PostCSS 运行器配置的其他选项结合在一起。

例如，如果我想内联 URL，我应该将postcss-url插件添加到postcss-importPostCSS 运行器还是两者都添加（如果我的主样式表也有 URL 引用）？

似乎没有文档，我不太了解Github 页面上的代码示例。

我假设它会自动将重置规则附加到输出 CSS 文件中。该文档使用类似.block但没有说明它们的用途。

以下是什么意思？

这只是普通的 CSS 吗？我以前没见过--modifier。如果它只是常规 CSS，那么这个插件的目的是什么，因为我可以覆盖常规 CSS 文件中的默认值。我试图避免这样做。

我正在使用postcss-autoreset，它适用all: initial;于我在 CSS 文件中设置样式的任何元素。

但是，当我尝试设置元素的字体时，body只有我没有在 CSS 中设置样式的元素才会获得该字体。我设置样式的元素恢复为浏览器的默认设置。这很奇怪。

all: initial;似乎是压倒一切font-face的，因为当我在 Chrome 检查器中查看时，它显示为被覆盖。

作为下面的示例，页面上的所有元素都以Roboto字体显示，但标题中的文本使用浏览器默认设置。

应用程序.css

header.css

config.js（PostCSS CLI config.js 文件）

这是 postcss 生成的输出：

知道为什么会这样吗？

我正在使用 less、postcss 和 cssnano（版本 3.7.3）。在更少的情况下，我使用从共享基类继承的类，并在需要时覆盖一些属性。我发现 cssnano 正在重新排序继承\覆盖的属性，导致样式出现意外差异。

精简后的示例 .less 如下所示：

然后将其扩展为 css，如下所示：

但是 cssnano 然后执行以下操作，重新排序了 font-size 属性：

是否有一种不同的方式可以让我进行不会遇到此问题的继承/覆盖，或者是 cssnano 中的错误？

目的是什么：

• PostCSS 自动重置
• PostCSS 初始

两者的文档都非常稀疏，并没有真正解释为什么要使用它们以及目的是什么。

我试过自动重置。它似乎放置all: initial在您设计的每个元素上。在查看输出时，这似乎非常浪费。

它与以下有何不同：

查看自动重置的代码似乎就是这样做的：https ://github.com/maximkoretskiy/postcss-autoreset/blob/master/src/resetRules.es6

我不明白为什么这比使用更好*

这是我当前的 webpack 配置 – https://gist.github.com/lavezzi1/1179d91c584c0b0a7544c862c8bb07ca

如您所见，我做多页应用程序并面临一些问题。

1. 我想为每个页面编译 2 个文件：common.css（具有通用样式的 css 文件）和index.css（例如具有索引页面的单独样式的 css 文件）。我怎么能这样做？我尝试了 CommonChunks 插件，但它只生成 common.js 文件，而不是 css。现在我找到了一个解决方法，我只是直接在每个页面的入口 js 文件中导入 main.css 文件。但它带来了另一个问题，如下所述；

2. 我想在没有任何预处理器的情况下使用 postcss。可能吗？当我直接在 js 文件中导入 main.css 时，postcss 插件不起作用（代码无法编译）我测试了 postcss 嵌套插件，它在 *.vue 文件中工作得很好。如何解决？

我非常坚持。我希望你能帮忙。谢谢！

我正在使用 NPM 创建一个任务运行程序——我不想使用 Gulp 或 Grunt...slow!。任务运行器正在运行，而且速度很快！但是......自动前缀没有前缀。它拥有的 console.logs 也没有显示在终端中。看起来它没有被解雇。我在autoPrefix()SCSS 编译为 CSS 后调用的函数中调用它。

我有一个带有指向start.js 该文件的脚本对象任务的 package.json 具有以下代码：

我究竟做错了什么？我正在像这里的示例一样对其进行编码： https ://github.com/postcss/autoprefixer#javascript

我在我的项目中使用 webpack 和 postcss-import。我编写组件，有些组件可以嵌套到另一个组件，因此为它们编写路径很复杂import '../../../component-a';，依此类推。我想创建别名来解决这个问题。所以在我的 webpack.config.js 中我写道：

我的 webpack 配置位于根目录中。所以，问题是当我用 css 编写类似的东西时@import '@styles/vars.css';——它不起作用。我收到错误“未定义的变量 bla bla bla ...”。但是当我在 js 文件中导入块并写入import Logo from '@blocks/logo';时——它工作得很好。我还想注意@import '@styles/vars.css';- 与手写笔一起使用。所以也许我错过了一些关于 postcss-import 插件的东西。如何使它起作用？

UPD postcss 配置部分：

```

```

如何抑制 webpack 加载后 css 文件生成的警告？

警告示例：

我的 webpack 配置：