MAUI Blazor - SCSS 和 Tailwind

Question

我们有一个包含许多 Blazor 页面的 .NET MAUI Blazor 应用程序。 我们使用 SCSS 和 Tailwind 来代替纯 CSS。我们正在寻找如何完全自动转译为普通 CSS（甚至在管道中）。起初我们使用 AspNetCore.SassCompiler 扩展，这对于 scss 来说相当不错，但后来我们缺少

autoprefixer

功能。我们发现这正是 VS 实现任务运行器的原因。所以我们决定：

• Grunt

• Gulp

• Npm

• WebPack

Grunt

和

Gulp

内置于 VS 中（其他是第三方，有许多 github 问题）。经过一番研究，我们决定使用 Gulp，因为它允许并行编译。

但是为了能够在那里运行一些任务，我们每个程序员都必须安装

nodejs

，并且还需要通过运行

npm install

在 gulp 任务中使用的包。这些包在我们的

package.json

目录中的

src

中指定。

问题：

• 这是编译 SCSS 和 Tailwind 的首选流程吗？
• 有没有办法为新手删除这些手动步骤？所以他们不必手动安装

  nodejs

  并运行

  npm install

  ?
• 我们的以下配置是否存在任何潜在问题？

PS：这就是我们的

package.json

的样子

{
  "name": "projectName",
  "version": "1.0.0",
  "private": true,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-sass": "^5.1.0",
    "sass": "^1.63.6",
    "gulp-postcss": "^9.0.1",
    "autoprefixer": "^10.4.14",
    "gulp-clean-css": "^4.3.0",
    "gulp-sourcemaps": "^3.0.0",
    "tailwindcss": "^3.3.2",
    "cssnano": "^6.0.1"
  }
}

以及我们的

gulpfile.js

包含什么

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cleanCSS = require('gulp-clean-css');
const sourcemaps = require('gulp-sourcemaps');
const tailwindcss = require('tailwindcss');
const cssnano = require('cssnano');

// Sass source and destination
const sassSrc = 'wwwroot/style/scss/**/*.scss';
const sassDest = 'wwwroot/style/css';

//// Tailwind source and destination
const tailwindSrc = 'wwwroot/style/tailwind/**/*.css';
const tailwindConfig = 'wwwroot/style/tailwind/tailwind.config.js';
const tailwindDest = 'wwwroot/style/css';

// Define common function for compiling Sass, adding prefixes, and minifying
gulp.task('build-sass', function () {
    return gulp.src(sassSrc) // Gets all files ending with .scss in src/scss and children dirs
        .pipe(sourcemaps.init()) // Initialize sourcemap
        .pipe(sass.sync().on('error', sass.logError)) // Converts Sass to CSS with gulp-sass
        .pipe(postcss([autoprefixer()])) // Adds vendor prefixes with Autoprefixer
        .pipe(cleanCSS({ compatibility: 'ie10+' })) // Minifies the CSS
        .pipe(sourcemaps.write('.')) // Write the sourcemaps to the same dir
        .pipe(gulp.dest(sassDest));
});

gulp.task('build-tailwind', function () {
    return gulp.src(tailwindSrc)
        .pipe(postcss([
            tailwindcss(tailwindConfig),
            autoprefixer,
            cssnano()  // Tailwind minification
        ])) // Transpile Tailwind CSS
        .pipe(gulp.dest(tailwindDest));
});

gulp.task('watch', function () {
    gulp.watch(sassSrc, gulp.series('build-sass'));

    const tailwindFiles = [
        "./../tailwind/*.*",
        "./../../../**/*.{razor,html,cshtml}",
        "./../../js/**/*.{js}",
    ];
    gulp.watch(tailwindFiles, gulp.series('build-tailwind'));
})

gulp.task('build', gulp.series('build-sass', 'build-tailwind'));

gulp.task('default', gulp.series('build', 'watch'));

Answer 1

1. 考虑使用 Tailwind CLI 独立版
2. 或者只是编写一些 MSBuild 任务，这些任务将在构建或您选择的任何目标之前运行任务运行程序。

附注您还可以为第一个选项编写 MSBuild 任务，以便在构建之前下载一次可执行文件。如果你有兴趣我可以分享一个。