【gulp-sass】import sass from ‘sass’ is deprecated エラーの原因と解決方法

Deprecation Warning: import sass from 'sass' is deprecated.
Please use import * as sass from 'sass' instead.

Deprecation Warning [legacy-js-api]: The legacy JS API is deprecated
and will be removed in Dart Sass 2.0.0.

警告が出る組み合わせ

• gulp-sass v5 以前 + sass（Dart Sass）1.79.0 以降
• gulpfile.js で sass(require('sass')) の形式を使用
• node-sass から sass（Dart Sass）に移行した直後

# gulp-sass のバージョン確認
npm list gulp-sass

# sass（Dart Sass）のバージョン確認
npm list sass

# すべての関連パッケージを一覧表示
npm list gulp gulp-sass sass

実行結果の例

project@1.0.0
├── gulp@4.0.2
├── gulp-sass@5.1.0    ← v5（Legacy API を使用）
└── sass@1.83.0        ← 1.79以降（非推奨警告あり）

# gulp-sass と sass を最新版にアップグレード
npm install gulp-sass@latest sass@latest --save-dev

# インストール後にバージョン確認
npm list gulp-sass sass

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function() {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('./dist/css'));
});

const gulp = require('gulp');
const gulpSass = require('gulp-sass');
const sassCompiler = require('sass');

// コンパイラを明示的に指定
const sass = gulpSass(sassCompiler);

gulp.task('sass', function() {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sass({
      api: 'modern-compiler'  // Modern API を使用
    }).on('error', sass.logError))
    .pipe(gulp.dest('./dist/css'));
});

ポイント：api: 'modern-compiler' を指定することで、Modern API が使用され、非推奨警告が解消されます。api: 'modern' も使用可能ですが、modern-compiler の方がパフォーマンスに優れています。

import gulp from 'gulp';
import gulpSass from 'gulp-sass';
import * as sassCompiler from 'sass';

const sass = gulpSass(sassCompiler);

export function styles() {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sass({
      api: 'modern-compiler'
    }).on('error', sass.logError))
    .pipe(gulp.dest('./dist/css'));
}

注意：ESM では import sass from 'sass' ではなく import * as sassCompiler from 'sass' と書く必要があります。デフォルトエクスポートが存在しないためです。

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function() {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sass({
      silenceDeprecations: ['legacy-js-api']  // 警告を抑制
    }).on('error', sass.logError))
    .pipe(gulp.dest('./dist/css'));
});

注意：silenceDeprecations はあくまで警告の非表示です。Dart Sass 2.0 で Legacy API が完全に削除されると、この方法は動作しなくなります。早めに v6 へのアップグレードを検討してください。

node-sass から sass への移行

• node-sass は公式に非推奨（deprecated）です
• LibSass（node-sassの内部エンジン）もメンテナンス終了済みです
• 新しいSass機能（@use, @forward, モジュールシステムなど）は sass でのみ使えます
• まだ node-sass を使っている場合は、速やかに sass に移行しましょう

# node-sass をアンインストール
npm uninstall node-sass

# sass（Dart Sass）をインストール
npm install sass --save-dev

# gulp-sass も最新版に
npm install gulp-sass@latest --save-dev

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.container{display:flex;justify-content:center;align-items:center}

const gulp = require('gulp');
const gulpSass = require('gulp-sass');
const sassCompiler = require('sass');
const sourcemaps = require('gulp-sourcemaps');

const sass = gulpSass(sassCompiler);

// 開発環境：SourceMap あり + expanded
gulp.task('sass:dev', function() {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({
      api: 'modern-compiler',
      sourceMap: true,
      sourceMapIncludeSources: true
    }).on('error', sass.logError))
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('./dist/css'));
});

// 本番環境：SourceMap なし + compressed
gulp.task('sass:prod', function() {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(sass({
      api: 'modern-compiler',
      style: 'compressed'
    }).on('error', sass.logError))
    .pipe(gulp.dest('./dist/css'));
});

ポイント：開発時は SourceMap + expanded で読みやすいCSSを出力し、本番では compressed で最小化するのがベストプラクティスです。

const gulp = require('gulp');
const gulpSass = require('gulp-sass');
const sassCompiler = require('sass');
const notify = require('gulp-notify');
const plumber = require('gulp-plumber');

const sass = gulpSass(sassCompiler);

// エラーハンドラー
const errorHandler = notify.onError({
  title: 'Sass Compile Error',
  message: 'Error: <%= error.message %>'
});

gulp.task('sass', function() {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(plumber({ errorHandler }))
    .pipe(sass({
      api: 'modern-compiler'
    }))
    .pipe(gulp.dest('./dist/css'));
});

// ファイル監視
gulp.task('watch', function() {
  gulp.watch('./src/scss/**/*.scss', gulp.series('sass'));
});

エラーハンドリングのメリット

• gulp-plumber：エラー発生時にストリームを中断せず、watchタスクの停止を防止
• gulp-notify：デスクトップ通知でエラーを即座に把握
• 開発中のSCSS構文エラーで毎回 gulp watch を再起動する手間がなくなります

npm install gulp-postcss autoprefixer cssnano --save-dev

const gulp = require('gulp');
const gulpSass = require('gulp-sass');
const sassCompiler = require('sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const sourcemaps = require('gulp-sourcemaps');
const gulpIf = require('gulp-if');

const sass = gulpSass(sassCompiler);
const isProd = process.env.NODE_ENV === 'production';

// PostCSS プラグイン
const postcssPlugins = [
  autoprefixer(),              // ベンダープレフィックス自動付与
  ...(isProd ? [cssnano()]:[])  // 本番のみ CSS 圧縮
];

gulp.task('styles', function() {
  return gulp.src('./src/scss/**/*.scss')
    .pipe(gulpIf(!isProd, sourcemaps.init()))
    .pipe(sass({
      api: 'modern-compiler'
    }).on('error', sass.logError))
    .pipe(postcss(postcssPlugins))
    .pipe(gulpIf(!isProd, sourcemaps.write('./maps')))
    .pipe(gulp.dest('./dist/css'));
});

gulp.task('watch', function() {
  gulp.watch('./src/scss/**/*.scss', gulp.series('styles'));
});

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

# 最新2バージョン + シェア1%以上 + サポート中
last 2 versions
> 1%
not dead

# Vite プロジェクト作成
npm create vite@latest my-project

# sass をインストールするだけでOK
npm install sass --save-dev

import { defineConfig } from 'vite';

export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        api: 'modern-compiler',  // Modern API を使用
        additionalData: '@use "src/styles/variables" as *;'
      }
    }
  }
});

ポイント：新規プロジェクトでは Vite の採用をおすすめします。HMR（Hot Module Replacement）が非常に高速で、設定もシンプルです。既存の gulp プロジェクトは無理に移行せず、まず gulp-sass v6 へのアップグレードで対応しましょう。

# sass をインストール
npm install sass --save-dev

# node_modules を再構築する場合
rm -rf node_modules package-lock.json
npm install

# node-sass を削除して sass に置き換え
npm uninstall node-sass
npm install sass --save-dev

# gulp を v4 にアップグレード
npm install gulp@4 --save-dev

// NG: Legacy API のオプション名
sass({ outputStyle: 'compressed' })

// OK: Modern API のオプション名
sass({ style: 'compressed' })

// NG: Legacy API のオプション名
sass({ includePaths: ['node_modules'] })

// OK: Modern API のオプション名
sass({ loadPaths: ['node_modules'] })

const gulp = require('gulp');
const gulpSass = require('gulp-sass');
const sassCompiler = require('sass');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');
const sourcemaps = require('gulp-sourcemaps');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');

const sass = gulpSass(sassCompiler);

// パス設定
const paths = {
  src: './src/scss/**/*.scss',
  dest: './dist/css'
};

// 開発用タスク
function stylesDev() {
  return gulp.src(paths.src)
    .pipe(plumber({ errorHandler: notify.onError('Sass Error: <%= error.message %>') }))
    .pipe(sourcemaps.init())
    .pipe(sass({
      api: 'modern-compiler',
      sourceMap: true,
      sourceMapIncludeSources: true
    }).on('error', sass.logError))
    .pipe(postcss([autoprefixer()]))
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest(paths.dest));
}

// 本番用タスク
function stylesProd() {
  return gulp.src(paths.src)
    .pipe(sass({
      api: 'modern-compiler',
      style: 'compressed'
    }).on('error', sass.logError))
    .pipe(postcss([autoprefixer(), cssnano()]))
    .pipe(gulp.dest(paths.dest));
}

// ファイル監視
function watchFiles() {
  gulp.watch(paths.src, stylesDev);
}

// タスク登録
exports.dev = gulp.series(stylesDev, watchFiles);
exports.build = stylesProd;
exports.default = exports.dev;

package.json のスクリプト例

{
  "scripts": {
    "dev": "gulp dev",
    "build": "gulp build"
  }
}