使用Node Sass生成文件

Question

如何使用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个文件？

Answer 1

我费了很大劲才想明白。。。我决定使用Gulp来编译、监视和生成我需要的文件，而不是使用node-sas

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

"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文件类型。这是我看的帮助我的视频。

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'));
});