我的第一个问题是关于如何为简单项目推荐这个开关,只是为了预处理/ Concat/Minify？
理解这个未来的"标准",比如Webpack和PostCss-NextCss-Autoprefixer等,就像是在迷恋我....
所以这导致了我的下一个问题,是否有任何教程可以指导我在第一个问题中讲述的简单任务？
或者是一个简单的方法来改变我gulpfile.js的webpack-config.js
我在gulp中的正常任务不是最佳实践,但运作良好:
//load plugins
var gulp = require('gulp'),
runSequence = require('run-sequence'),
sass = require('gulp-ruby-sass'),
compass = require('gulp-compass'),
rev = require('gulp-rev'),
revDel = require('rev-del'),
del = require('del'),
minifycss = require('gulp-minify-css'),
uglify = require('gulp-uglify'),
rename = require('gulp-rename'),
concat = require('gulp-concat'),
notify = require('gulp-notify'),
plumber = require('gulp-plumber'),
watch = require('gulp-watch'),
path = require('path');
//the title and icon that will be used for the Grunt notifications
var notifyInfo = {
title: 'Gulp',
icon: path.join(__dirname, 'gulp.png')
};
//error …我正在试图找出一个涉及postcss的工作流程.我需要在一个文件夹中有css partials,观察它们并输出一个bundle css文件.bundle css文件必须在顶部包含一个base.css文件.
postcss有一个--watch标志,可以看多个文件,但只能输出多个文件,而不能输出bundle css文件.我可以cat用来组合所有文件并使用stdin将它们传递给postcss.但我不能cat从postcss 触发命令.
我的文件结构可能如下所示:
partials/
|_one.css
|_two.css
styles/
|_base.css
|_bundle.css
通过使用npm,我如何安排我的脚本部分使用CLI命令来实现我的目标？
我的主要问题是弄清楚如何编排构建步骤,而没有一步阻塞下一步.链接到工作流程示例会很棒!
编辑我得到了一个解决方案,但它非常不理想,因为它不能与源图一起使用,不能有全局变量,而且是一个两步过程.但我会在此概述,希望有人能提出更好的方法.
使用以下结构:
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.首先,我确保我有一个样式/包文件夹(mkdir -p),然后我启动nodemon来观察部分/中的css文件.发生更改时,nodemon会运行npm run css:build.
css:build 处理部分/中的css文件并以styles/bundle /输出它们(请记住,我不知道如何观看多个文件并输出一个捆绑文件).
运行后css:build,npm运行postcss:build处理来自styles/bundle /的@import css文件的master.css文件.然后我将处理过的内容从stdout输出(>)到build/stylesheet/default.css.
{
"css": …我使用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();
});
}
我研究了这个问题但是问题的所有出现似乎都是针对node.js的极早期版本,例如:
解决方案似乎总是"更新节点".
但我的似乎是最新的:
[ec2-user@ip-172-31-22-79 Server]$ node -v
v5.7.0
我的问题可能在这里？
我目前正在构建一个大型的React应用程序.Css,从未成为我的强项.但是现在CSS有了使用React的sass/cssNext/inline样式.我一直在使用BEM和sass,但是随着我的其他应用程序变得越来越大,甚至开始崩溃.特别是当你具有"重新皮肤"或"主题"的能力以外的主要配色方案等页面.
所以 - 有人可以指出一种经过验证的方法来创建具有可以扩展的反应的css,并且允许在人们想要借用我的组件时进行客户主题化.例如,
<MyComponent />
// this component has its styles but lets say Joe Schmoe wants be import
// it? But, Joe wants to overlay his custom styles?
// Is there a new paradigm that allows for an overlay or reskin within the component?
甚至整个应用程序的想法可以在一段时间内换肤.我知道这是一个非常基本的问题,但每当我构建项目时,我的痛点似乎也是CSS - 所以我想知道什么是真正的.
在Gatsby 2.17.6项目中，构建时：
构建生产JavaScript和CSS包[====
] 1.940 s 1/6 17％运行查询失败构建生产JavaScript和CSS包-75.519s错误＃98123 WEBPACK
生成JavaScript包失败
postcss-svgo：TypeError：无法设置 未定义的属性“ multipassCount”
未完成运行查询-77.639s npm错误！代码ELIFECYCLE npm ERR！errno 1 npm错误！gatsby-starter-default@1.0.0 build：节点node_modules / gatsby / dist / bin / gatsby.js build` npm ERR！退出状态1
这些是我的一些依赖项：
"dependencies": {
"babel-plugin-styled-components": "^1.8.0",
:
"gatsby": "^2.0.19",
"gatsby-plugin-favicon": "^3.1.4",
"gatsby-plugin-google-fonts": "0.0.4",
"gatsby-plugin-offline": "^2.0.5",
"gatsby-plugin-react-helmet": "^3.0.0",
"gatsby-plugin-styled-components": "^3.0.1",
:
"react": "^16.5.1",
"react-dom": "^16.5.1",
"react-helmet": "^5.2.0",
"react-leaflet": "^2.1.1",
"styled-components": "^4.1.1"
}
我在gatsby-config.js上没有看到关于postcss的任何配置，我想这是Gatsby的默认行为。npm ls postcss-svgo抛出这个：
gatsby-starter-default@1.0.0 /<app>/source
??? gatsby@2.17.6
??? optimize-css-assets-webpack-plugin@5.0.3
??? cssnano@4.1.10
??? cssnano-preset-default@4.0.7
??? postcss-svgo@4.0.2 …是否可以使用:root带有 ID 或类的选择器？我正在尝试翻转不同页面上的颜色。
:root {
--color-one: red;
--color-two: blue;
}
/* Can something like this happen? */
.posts:root {
--color-one: green;
--color-two: yellow;
}
我想在引入类时覆盖根变量。我知道我可以用 JS 实现，但如果可能的话我想使用纯 CSS。
干杯!
在 下创建新项目时create-react-app，您会立即收到有关postcss.
npm 报告的问题：https ://www.npmjs.com/advisories/1693
相关的未决问题可以在这里找到：
该问题已在 上修补postcss v8.2.10，但在创建新项目时仍然存在，因为react-scripts尚未升级依赖项。
所以，我的问题是我无法再运行构建，因为它们由于漏洞而失败。
由于我迫不及待地等待他们修补它以继续处理我的东西（他们似乎从一年前就意识到了这一点），是否有一些解决方法可以用来解决它？
我尝试添加一个postcss分辨率package.json：
"resolutions": {
"postcss": "^8.2.10"
},
但这并没有让我失望。
任何的想法？
这是一个有点简单的问题，在PostCSS 文档中似乎没有非常明确的答案。我注意到在PostCSS 使用指南中，他们使用 require 语句定义postcss.config.js文件插件，如下所示：
// postcss.config.js
module.exports = {
plugins: [
require('precss'),
require('autoprefixer')
]
}
然而，其他 PostCSS 示例（例如来自解释 的函数形式的PostCSS CLI 文档postcss.config.js） ，它们对插件使用不同的语法
module.exports = (ctx) => ({
map: ctx.options.map,
parser: ctx.options.parser,
plugins: {
'postcss-import': { root: ctx.file.dirname },
cssnano: ctx.env === 'production' ? {} : false,
},
})
还有其他在线教程也遵循此语法
module.exports = (ctx) => ({
map: ctx.options.map,
parser: ctx.options.parser,
plugins: {
'postcss-import': { root: ctx.file.dirname },
cssnano: ctx.env === 'production' …我试图弄清楚如何在我的最终输出css文件上运行postcss.
'strict';
const path = require('path');
const webpack = require('webpack');
const StatsPlugin = require('stats-webpack-plugin');
/* POSTCSS Optimizations of CSS files */
const clean = require('postcss-clean');
const colorMin = require('postcss-colormin');
const discardDuplicates = require('postcss-discard-duplicates');
const discardEmpty = require('postcss-discard-empty');
const mergeRules = require('postcss-merge-rules');
const mergeLonghand = require('postcss-merge-longhand');
const minifyFonts = require('postcss-minify-font-values');
const orderedValues = require('postcss-ordered-values');
const uniqueSelectors = require('postcss-unique-selectors');
/* EXTRACT CSS for optimization and parallel loading */
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
entry: './src/index',
output: {
path: path.join(__dirname, 'dist'), …我正在尝试设置汇总以使用SCSS样式表和Lost网格系统,这需要通过PostCSS进行解析.我已经验证SCSS正在被正确解析,但PostCSS处理器似乎没有任何影响.
根据rollup-plugin-sass文档,我只需要将vanilla JS函数传递给该processor选项.这没有错误,但生成的CSS没有什么不同.
这是我的汇总配置,用rollup -c config/dev.js:
// Rollup plugins.
import babel from 'rollup-plugin-babel';
import cjs from 'rollup-plugin-commonjs';
import globals from 'rollup-plugin-node-globals';
import replace from 'rollup-plugin-replace';
import resolve from 'rollup-plugin-node-resolve';
import sass from 'rollup-plugin-sass';
import postcss from 'postcss';
const postcssProcessor = postcss([require('autoprefixer'), require('lost')]);
export default {
dest: 'dist/app.js',
entry: 'src/index.jsx',
format: 'iife',
plugins: [
resolve({
browser: false,
main: true
}),
sass({
// processor: postcssProcessor,
output: 'dist/styles.css'
}),
babel({
babelrc: false,
exclude: 'node_modules/**',
presets: [ …