css - 如何在 Webpack v3 中构建一个 less 编译链(gulp 风格)？

Question

对于一个新元素，我必须只使用 webpack，因此需要找到一种方法来高效地编译我们的样式表。基本上以一种非常古怪的方式:

• 收集所有 less 文件，包括 glob-patterns像 src/**/*.less (css 顺序可以是任意的)
• 还允许导入 css 文件，例如 ../node_modules/vendor/**/*.css 或 3rdparty/master.less
  • (如果我必须为此设置一个 bogus.js 入口点，没问题...)

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

• 将 less 转译为 CSS
• 合并(连接)less 和 css
• 让 cssnano 使用特定的 css nano 选项(例如， orderedValues: false, normalizeWhitespace: true ...
• 编写styles.css作为最终输出

当然还有:

• 让源映射在 styles.css.map
链中存活
• 高效观察和通常的惰性/增量编译(如 gulp 和 webpack 拥有的)

我做的不需要的是css modules (css 导入 到节点模块中以供“范围”使用，作为散列范围选择器出现...)

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

这个 SO 问题有我的 first attempt合并后我在中间陷入了配置 hell ...

---

到目前为止的考虑(有帮助或无帮助)

我知道，对于 webpack，任何 资源，包括 css 甚至字体和图像都是一个“模块”...而不是将我的 css“模块”与实际的 js 合并(只是为了以后煞费苦心稍后再将它们分开)，并行地有一个入口点 cssstub.js 可能更明智——也称为 multi-compiler mode .

但这真的是我的智慧结束的地方......在 webpack 中对一组文件执行一系列 $things 似乎真的很难(除非它是一个连接的 javascript 模块图)。我确实找到了 something on globbing ，但这还不够(合并 css、cssnano 等)而且大多数情况下我根本无法将各个部分粘合在一起...

Answer 1

我已经使用 gulp 构建 less 并创建如下相应的 map :

第一步编译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并创建 map 文件

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。