问题标签 [postcss]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
3 回答
9879 浏览

css - 如何在一个 CSS 文件中定义 PostCSS 变量以“导入”到另一个 CSS 文件中?

在 Sass 中,我可以在一个单独的文件中定义我的变量_variables.scss,然后让这些变量在我使用的任何地方都可用@import variables;。(实际上,变量在第一次导入后全局可用。)

使用 PostCSS,我可以使用postcss-simple-varspostcss-css-variables定义单个文件的本地变量。我想在一个文件中定义所有/大多数变量,然后@import在我需要使用它们的地方定义该文件。

我知道 PostCSS 插件可以为插件配置预定义的变量,但是我不能,例如,计算给定背景的对比色。


编辑:我可能不清楚我的问题是什么。

有没有办法在 CSS 文件中定义 PostCSS 变量,使变量不是全局的,但可以“导入”到另一个 CSS 文件中?

如上所述,我可以使用 Sass,但是所有变量实际上都是全局的(不理想)。否则,在 PostCSS 中,我可以在每个样式表中定义我需要的变量(有什么意义?),或者我可以在静态 JavaScript 结构中定义它们(静态,因为它们不能引用其他变量)。

0 投票
2 回答
445 浏览

meteor - 如何在 Meteor JS 中使用 PostCSS?

我想在我的 Meteor 应用程序中使用 PostCSS,但我找不到任何包来执行此操作,那么有人知道如何将 PostCSS 集成到 Meteor JS 中吗?

0 投票
2 回答
829 浏览

gruntjs - 你如何设置 grunt postCSS 选项?

在我的 gruntfile 中设置 postCSS,主要是作为处理自动前缀和缩小的便捷方式,使用以下代码。

},

令我恐惧的是,我发现它破坏了我的 RGBA 值,使它们成为 HSLA,将我精心制作的 REM 单位转换为 pc,调整我的 z-index,天知道还有什么。

我知道这些都是 postCSS 的“功能”,我都不想要。

看过一些文档后,对我来说并不明显 a) 我可以禁用这种行为,或者 b) 如何使用 grunt 来做到这一点。

是否可以专门收回对这些功能的控制?

0 投票
2 回答
5707 浏览

node.js - 用 postcss 观察多个 css 文件并输出一个 bundle.css

我正在尝试找出涉及 postcss 的工作流程。我需要将 css 部分放在一个文件夹中,观察它们并输出一个捆绑 css 文件。捆绑 css 文件必须在顶部包含一个 base.css 文件。

postcss 有一个 --watch 标志,可以监视多个文件,但只能输出多个文件而不是捆绑 css 文件。我可以cat用来组合所有文件并使用标准输入将它们传送到 postcss。但我无法cat从 postcss 触发命令。

我的文件结构可能如下所示:

我将如何使用 npm 安排我的脚本部分以使用 CLI 命令来实现我的目标?

我的主要问题是弄清楚如何协调构建步骤而不会阻止下一步。一个工作流程示例的链接会很棒!

编辑我得到了一个可行的解决方案,但它非常不理想,因为它不能与源映射一起使用,不能有全局变量并且是一个两步过程。但我将在这里概述它,希望有人可以提出更好的方法。

使用以下结构:

我的package.json. 首先,我确保我有一个样式/捆绑文件夹 ( mkdir -p),然后我启动nodemon来查看 partials/ 中的 css 文件。当发生变化时,nodemon 运行npm run css:build

css:build在 partials/ 中处理 css 文件,并在 styles/bundle/ 中输出(记住我不知道如何查看多个文件并输出一个捆绑文件)。

运行后css:build,npm 运行postcss:build处理 master.css 文件,该文件从 styles/bundle/ 中 @import css 文件。然后我将处理后的内容从 stdout 输出 (>) 到 build/stylesheet/default.css。

0 投票
0 回答
372 浏览

gulp - PostCSS 在输出前通过 Gulp 文件连接

是否可以从多个文件中配置gulp.src()gulp.dest()生成单个文件?

上面的代码为每个输入文件(一对一)生成一个输出文件,并为每个文件生成一个源映射。

我是否需要通过管道传输一个 concat 任务才能发生这种情况,还是可以通过上述两种 gulp 方法的选项来完成?

谢谢。

0 投票
1 回答
371 浏览

javascript - 更新:Gulpfile 中 postCSS 和 Babel 的错误

目标

我正在更新我的旧的gulpfile.js,它曾经主要用于将我的 Sass 编译成 CSS,但现在我正试图让 Gulp 执行以下操作:

  1. 同步浏览器,启动 localhost 服务器 -完成
  2. 编译 Sass => CSS -完成
  3. 使用 JSHint 显示任何 JavaScript 错误 -完成
    • 用 Babel 编译 ES6 => ES6(WORKING ON)
  4. 缩小所有资产(WORKING ON)
    • 显示项目文件大小 -完成
  5. 将 index.html、style.css 和图片部署到 S3(WORKING ON)
  6. 观看文件,在.scss.html更改时重新加载浏览器 -完成

问题

  • 试图缩小我的 Javascript 并创建一个scripts.min.js 文件,它不断将后缀 min 添加到每个新的缩小 JavaScript 文件中。

文件夹结构

gulpfile.js

0 投票
1 回答
318 浏览

html - @media 查询不起作用(POSTCSS 生成的 CSS 代码)

这个问题已经被问过好几次了。我尝试应用发布到我的项目的解决方案,但我仍然无法让@media查询工作。

这是我的HTML代码。

使用 POSTCSS 使用 psotcss-neat 插件生成的 CSS 代码

我的CSS代码

0 投票
1 回答
3224 浏览

google-chrome - SVG 在 chrome 中透明,可在其他浏览器中使用

我在 Photoshop CC 中创建了一个徽标。导出为 > SVG。添加到我的项目中。它的引用很好,因为我可以从 Chrome Dev Tools 中的 html 转到路径并查看 SVG。但是该图标拒绝在网页上显示。我什至尝试将 svg 导入 Inkscape 并以不同的 svg 格式重新导出,看看这是否是问题所在。在 Chrome 开发工具中查看文件显示:

透明 SVG

我正在使用root,与lost

手写笔/丢失

编辑

这是svg的代码。

http://pastebin.com/UkGzVYp8

0 投票
1 回答
254 浏览

javascript - 如何在 Typescript 中使用 CSSNext 并避免讨厌的“错误 TS2349”Typescript - 方式

对不起,如果这个问题有豆问和问。但是我一直遇到这个讨厌的“错误 TS2349”,每次我想在我的Typescript项目中使用外部节点包时,什么还没有TypeScript 定义:(

这是我当前的设置

我的主要代码

我在找什么?

我得到了什么:(

** _reference.d.ts 有 **

真正的问题是

什么是英语中的“错误 TS2349”,在这种情况下,我如何编写一个mad max TypeScript 定义来解决这个问题和相关问题。:)

我喜欢 Type Script 方式,但其他时候 :(

** 回答 **

在下面的代码的帮助下解决这个问题是:

它可能不是 100% 的 cssnext 投诉,但它是 TSD 的起点。

0 投票
3 回答
1593 浏览

javascript - grunt postcss“未找到”

Grunt 新手,试图让 Gruntfile 为 wordpress 项目运行。我的根目录中有一个 package.json 和 Gruntfile.js。我想添加 grunt-postcss,但是当我按照说明操作时,我不断收到“警告:找不到任务“grunt-postcss”。” 我可能错误地设置了 Grunt,因为无论我运行什么,我都找不到任务。这是我的 Gruntfile 内容: