Tag: postcss

stream通过postcss uncss插件的CSS，以最大限度地减less缓冲区的使用？: 如果这个问题太宽泛，请让我知道。我会把它分解成更多的离散片段。我们遇到了PostCSS uncss插件在处理大型html和css文件时可以处理的限制。一些由@superflycss项目生成的testing文件几乎是一百万行长的css，随着更多模块的添加，将会变得更长。这是一个例子。无论如何，通过PostCSS uncss，加载整个CSS和html文件，然后执行匹配，我们认为这是造成内存耗尽。想知道是否有人知道通过loggingstream式传输CSS或HTMLlogging的方法，以便我们可以得到相同的结果：一个修剪的CSS文件，只包括使用的CSSselect器源地图这些是相关的问题链接： https://github.com/giakki/uncss/issues/339 https://github.com/giakki/uncss/issues/319 https://github.com/postcss/postcss/issues/1087

Grunt grunt-postcss Autoprefixer不能正常工作: 我已经跳进了一个非盈利的开源项目，并且想要帮助一下，但是我不熟悉Grunt。我做了一些研究，不知道为什么configuration不起作用。这是我正在尝试使用的插件。它允许应用几个后处理器，但我现在只需要Autoprefixer： https ： //github.com/nDmitry/grunt-postcss configuration： Gruntfile.js http://pastebin.com/4Ud0sa1W grunt/concurrent.js http://pastebin.com/Satr1wSK grunt/sass.js http://pastebin.com/rc6evWas grunt/watch.js http://pastebin.com/eGBpFSLs 任务得到执行没有问题： laptop:website lextoc$ grunt sass:postcss Running "sass:postcss" (sass) task Done. 但是，CSS文件没有得到所需的供应商前缀，我使用display: flex来检查它是否工作。原来的项目（我分叉它）可以在这里find： https ： //github.com/faforever/website

webpack postcss-loader在传递函数时不工作: 我正在从一个webpackconfiguration中repo removed 。现在当我运行npm run teststart （使用webpack.development.js ）或npm run testbuild （使用webpack.production.js ）时，postcss加载器stylelint，autoprefixer和postcss-focus似乎不起作用。但是，如果我将一个数组而不是form（）=> []的函数传递给postcss-loader的插件，它确实可行。所以例如，如果我改变 options: { plugins: () => [require('autoprefixer'), require('postcss-focus')] } 至 options: { plugins: [require('autoprefixer'), require('postcss-focus')] } 在webpack.production.js它的作品。但在另一个项目中，函数格式正常工作。试图找出为什么它不在这里工作。

将gatsby项目从css转换为scss，在丢失网格预处理方面存在问题: 我正在采用一个使用迷失网格的gatsby starter项目，并从css转换为scss来获得一些收益。这是启动项目： https ： //github.com/wpioneer/gatsby-starter-lumen 从本质上讲，我将项目转换为scss，因为我更喜欢它的结构，并希望从所有的css文件中移走。现在，我简单地说：安装了sass-loader ， scss和node-sass 将所有的css文件重命名为scss文件并修改gatsby-node.js到以下内容： var rucksack = require('rucksack-css') var lost = require("lost") var cssnext = require("postcss-cssnext") exports.modifyWebpackConfig = function(config, env) { config.merge({ postcss: [ lost(), rucksack(), cssnext({ browsers: ['>1%', 'last 2 versions'] }) ] }) config.loader('svg', { test: /\.(svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'file-loader', }) config.loader('sass', { test: /\.scss$/, […]

为什么我会在Node v5.7.0上得到一个“Promise is not defined。”的错误: 我使用autoprefixer postcss和移动到一个新的Linux服务器后，一定是错的，但我不知道这可能是什么。我收到错误： /home/ec2-user/Enviziion/Muveoo/Server/node_modules/postcss/lib/lazy-result.js:157 this.processing = new Promise(function (resolve, reject) { ^ ReferenceError: Promise is not defined 这是由以下几点触发的 var autoprefixer = require('autoprefixer'); var postCSS = require('postcss'); function prefix(css, res, type, fullPath) { postCSS([autoprefixer]).process(css).then(function(result) { var css = result.css; var length = css.length; res.writeHead(200, { 'Content-Length' : length, 'Content-Type' : type }); res.write(css); res.end(); }); } […]

用postcss观察多个css文件并输出一个bundle.css: 我试图找出涉及postcss的工作stream程。我的需要是在一个文件夹中有css partials，看着他们，并输出一个捆绑的CSS文件。 bundle css文件的顶部必须包含一个base.css文件。 postcss有一个–watch标志，可以观看多个文件，但只能输出多个文件，而不是捆绑的css文件。我可以使用cat结合所有的文件，并使用标准inputpipe道postcss。但是我不能从postcss中触发cat命令。我的文件结构可能是这样的： partials/ |_one.css |_two.css styles/ |_base.css |_bundle.css 我如何使用npm来安排我的脚本部分使用CLI命令来实现我的目标？我的主要问题是弄清楚如何对构build步骤进行pipe理，而不是一个步骤阻塞下一步。一个工作stream程示例的链接将是非常好的！编辑我有一个解决scheme工作，但它是非常不理想的，因为它不能与源代码映射，不能有全局variables，是一个两步的过程。但我会在这里概述一下，希望有人能提出一个更好的方法。使用以下结构： build/ |_stylesheet/ |_default.css (final processed css) partials/ |_one.css |_one.htm (html snippet example) |_two.css |_two.htm (html snippet example) styles/ |_base.css |_bundle/ (css files from partial/ that is partly processed) |_one.css |_two.css |_master.css (import rules) 我在package.json有两个步骤。 […]