Блог

Как бы я использовал node-sass для создания этих файлов в моей папке /dist/css/ Вот файлы, которые я хочу создать после заполнения:

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

Я думаю, что мне нужно что-то добавить в раздел сценариев моего пакета.json, но я не уверен, что добавить. Мы очень ценим вашу помощь, спасибо!

ОБНОВЛЕНИЕ: Вот сценарий, который у меня есть в настоящее время:

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

Это создает только файл .css, но мне все еще не хватает файла .css.map, .min.css и .min.css.map. Как мне сгенерировать остальные 3 файла?

Я прошел через отжим, пытаясь понять это… Вместо использования node-sass я решил использовать что-то под названием Gulp для компиляции, просмотра и создания необходимых мне файлов.:

Чтобы запустить этот код, вам нужно будет установить эти зависимости разработчика:

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

});