使用节点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-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'));

});

使用节点Sass生成文件

Using Node Sass to generate files

compilation

sass

node-sass