html - Gulp将多个css文件编译成一个

标签 html css gulp

我有两个文件,main.css_vars.css,我正在使用 PostCSS。我仍在学习不同的插件和 PostCSS 的设置,但是,我对 Gulp 也很陌生,所以我在编译我的 css 文件时遇到了问题。

我想读取,main.css_vars.css然后编译成

./bundle/stylecss/ 到名为 main.css 的文件中。

  gulp.task('css', function () {
     return gulp.src('./postcss/**/*.css')
        // .pipe(postcss([ vars({ variables: colors }) ]))
        .pipe(postcss([ require('postcss-simple-vars')({ silent: true }) ]))
        .pipe(gulp.dest('./bundle/stylescss/main.css'));
});

我的 gulp 文件在上面,但是当我运行我的 gulpfile 时,我得到 enter image description here

知道我做错了什么吗?谢谢!

最佳答案

您可以使用 gulp 插件或 postcss 插件来做到这一点。

gulp 插件:https://www.npmjs.com/package/gulp-concat

postcss 插件:https://github.com/postcss/postcss-import

我更喜欢 postcss 插件,因为它没有那么神奇,但两者都可以完成工作:)

关于html - Gulp将多个css文件编译成一个,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33079612/

相关文章:

node.js - 在 Gulp 配置文件中使用 var 而不是 const 是否有原因?

Gulp + BrowserSync,在路径上服务

javascript - Unity 网络游戏是否容易受到跨站点脚本的影响

html - :before and :after pseudo-elements exhibiting confusing behavior

javascript - 将 css "display:none"值替换为“显示 :flex using js

html - 将 css 边框设置为 90 而不是 45 度 Angular

javascript - 动态改变 CSS 背景图片

angularjs - ASP.NET MVC、AngularJS、Bower 和部署站点文件夹结构

html - 如何根据页面宽度更改 HTML/CSS 标题图像?

html - css 背景图像不显示在 html 表中