gulp:PostCSS 失败 - postcss 版本高于 postcss-import 的版本
Posted
技术标签:
【中文标题】gulp:PostCSS 失败 - postcss 版本高于 postcss-import 的版本【英文标题】:gulp: PostCSS failing - postcss version higher than version of postcss-import 【发布时间】:2018-08-24 20:42:27 【问题描述】:我正在尝试使用 Gulp 将我的 CSS 转换为 PostCss。
当我将 cssnext 插件添加到 PostCss 时,我收到以下错误:
Unknown error from PostCSS plugin. Your current PostCSS version is 6.0.19, but postcss-import uses 4.1.16. Perhaps this is the source of the error below.
这是我的gulpfile.js
:
const gulp = require('gulp');
const postcss = require('gulp-postcss');
const concat = require('gulp-concat');
gulp.task('styles', function()
const postCssPlugins = [
require('cssnext')()
];
gulp.src('src/css/*.css')
.pipe(postcss(postCssPlugins))
.pipe(concat('style.css'))
.pipe(gulp.dest('.'));
);
完整的堆栈跟踪:
events.js:183
throw er; // Unhandled 'error' event
^
TypeError: styles.eachAtRule is not a function
at parseStyles (C:\gulp-test\node_modules\cssnext\node_modules\postcss-import\index.js:134:10)
at C:\gulp-test\node_modules\cssnext\node_modules\postcss-import\index.js:84:30
at LazyResult.run (C:\gulp-test\node_modules\postcss\lib\lazy-result.js:277:20)
at LazyResult.asyncTick (C:\gulp-test\node_modules\postcss\lib\lazy-result.js:192:32)
at processing.Promise.then._this2.processed (C:\gulp-test\node_modules\postcss\lib\lazy-result.js:231:20)
at new Promise (<anonymous>)
at LazyResult.async (C:\gulp-test\node_modules\postcss\lib\lazy-result.js:228:27)
at LazyResult.then (C:\gulp-test\node_modules\postcss\lib\lazy-result.js:134:21)
at process._tickCallback (internal/process/next_tick.js:188:7)
据我所知,postcss-import 包是cssnext的一个依赖。那我该怎么办?
【问题讨论】:
【参考方案1】:我找到了答案:
根据cssnext 的网站,cssnext 包(我用的)已经死了。与 PostCSS 一起使用的新包是 postcss-cssnext
:
const postCssPlugins = [
require('postcss-cssnext')()
];
【讨论】:
以上是关于gulp:PostCSS 失败 - postcss 版本高于 postcss-import 的版本的主要内容,如果未能解决你的问题,请参考以下文章
javascript Gulp 4配置SASS,PostCSS,autoprefixer,cssnano,sourcemaps
错误:加载 PostCSS 插件失败:找不到模块“postcss-import”(Vue 2)
如何修复“模块构建失败(来自 ./node_modules/postcss-loader/src/index.js)”