6

对于一个新项目，我必须只保留 webpack，因此需要找到一种方法来有效地编译我们的样式表。基本上以一种非常gulh-ish的方式：

  • 收集所有较少的文件，包括像这样的全局模式src/**/*.less（css顺序可能是任意的）
  • 还允许导入 css 文件，例如，say../node_modules/vendor/**/*.css或3rdparty/master.less
    • （如果我必须为此设置一个bogus.js入口点，那很好......）

所有这些，一个典型的 gulp 工作流程：

  • 将 less 转换为 css
  • 合并（concat）less和css
  • 已经cssnano完成了优化工作，具有特定的 css nano 选项，例如orderedValues: false, normalizeWhitespace: true...
  • 写styles.css为最终输出

而且当然：

  • 让源地图在该链中存活一段时间styles.css.map
  • 高效的观察和通常的惰性/增量编译（如gulp和webpack 所拥有的）

我不需要的是css modules（cssimported进入节点模块以供“范围”使用，作为散列范围选择器出现......）

如何在 Webpack 中完成“典型的”less|css 处理工具链？

这个 SO 问题是我的第一次尝试，在组合后我在中间陷入了配置地狱......

到目前为止的考虑（有用与否）

我知道，对于 webpack，包括 css 甚至字体和图像在内的任何资源都是一个“模块”......而不是将我的 css '模块'与实际的 js 合并（只是稍后再煞费苦心地再次将它们分开），它可能是更明智的是，有一个cssstub.js并行入口点——也称为多编译器模式。

但这确实是我的智慧结束的地方......在 webpack 中的一组文件上执行一系列 $things 似乎真的很难（除非它是一个连接的 javascript 模块图）。我确实在 globbing 上找到了一些东西，但这还不够（合并 css，cssnano，......）而且大多数情况下我根本无法将这些碎片粘合在一起......

4

1 回答 1

-2

我已经使用 gulp 来构建 less 并创建相应的地图，如下所示：

第一步在 tmp 文件夹中编译较少并生成 css

gulp.task('compile-less', function () {
    gulp.src('./*.less') // path to your file
    .pipe(less().on('error', function(err) {
        console.log(err);
    }))
    .pipe(gulp.dest('./tmp/'));
});

第二步缩小生成的css并创建地图文件

gulp.task('build-css', ['clean'], function() {
    return gulp.src('./tmp/**/*.css')
        .pipe(sourcemaps.init())
        .pipe(cachebust.resources())
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest('./compiled/css'));
});

如果你愿意，你可以添加额外的步骤来联系生成的 css。

于 2017-10-02T10:47:51.260 回答