使用 Node Sass 生成文件答案

【问题标题】：Using Node Sass to generate files使用 Node Sass 生成文件
【发布时间】：2021-09-09 03:20:36
【问题描述】：

如何使用 node-sass 在我的 /dist/css/ 文件夹中生成这些文件以下是我要编译后生成的文件：

.css
.css.map
.min.css
.min.css.map

我想我需要在我的 package.json 的脚本部分中添加一些内容，但我不确定该添加什么。非常感谢您的帮助，谢谢！

更新：这是我目前拥有的脚本：

"scripts": {
     "compile:sass": "node-sass --watch src/sass -o dist/css"

这只会生成一个 .css 文件，但我仍然缺少 .css.map 文件、.min.css 和 .min。 css.map。如何生成其他 3 个文件？

【问题讨论】：

标签： sass compilation node-sass

【解决方案1】：

我费尽心思试图弄清楚...我决定使用 Gulp 来编译、监视和生成我需要的文件，而不是使用 node-sass。：

要运行此代码，您需要安装这些开发依赖项：

  "devDependencies": {
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^8.0.0",
    "gulp-rename": "^2.0.0",
    "gulp-sass": "^5.0.0",
    "gulp-sourcemaps": "^3.0.0",
    "sass": "1.32"
  }

这是我的解决方案，它允许我编译、观察和快速生成 .css、.css.map、.min.css 和 .min.css.map 文件类型。这是我看过的video，对我有帮助。

var gulp = require('gulp');
var rename = require('gulp-rename');
var sass = require('gulp-sass')(require('sass'));
var sourcemaps = require('gulp-sourcemaps');

var styleSRC = './src/sass/**/*.scss';
var styleDIST = './dist/css';

gulp.task('expanded', async function(cb){
    gulp.src(styleSRC)
        .pipe(sass({
            errorLogToConsole: true,
            outputStyle: 'expanded'
        }))
        .on('error', console.error.bind(console))
        .pipe(gulp.dest(styleDIST))
        .on('end', cb);

});

gulp.task('compressed', function(cb){
    gulp.src( styleSRC )
        .pipe(sourcemaps.init())
        .pipe(sass({
            errorLogToConsole: true,
            outputStyle: 'compressed'
        }))
        .on( 'error', console.error.bind(console) )
        .pipe(rename( { suffix: '.min' } ) )
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(styleDIST))
        .on('end', cb);

});

gulp.task('default', function(){
    gulp.watch(styleSRC).on('change', gulp.series('compressed', 'expanded'));

});

【讨论】：