解決したいこと
gulpを使ってsassをコンパイルできるようにしたい
gulpを使用してscssをコンパイルできるように設定したいのですが上手くいきません。
ちなみにyoutubeで学習中の段階でのエラーです。
投稿者に質問しましたが返ってこない(消された?)のでQiitaで質問させていただいております。
【エラー内容】
プラグインgulp-sassでエラーしている模様。
sassもしくはnode-sassというプラグインの両方のパッケージが許可されているとのこと
発生している問題・エラー
terminal
gulp_test % gulp styles [09:42:43] Using gulpfile ~/Documents/code/gulp_test/gulpfile.js [09:42:43] Starting 'styles'... Error in plugin "gulp-sass" Message: gulp-sass no longer has a default Sass compiler; please set one yourself. Both the "sass" and "node-sass" packages are permitted. For example, in your gulpfile: const sass = require('gulp-sass')(require('sass')); [09:42:43] The following tasks did not complete: styles [09:42:43] Did you forget to signal async completion?
ソースコード(gulpfile.js,package.json)
javascript
const { src, dest } = require('gulp'); const LoadPlugins = require('gulp-load-plugins'); const $ = LoadPlugins(); const pkg = require('./package.json'); const conf = pkg['gulp-config']; const sizes = conf.sizes; function icon(done) { for(let size of sizes){ let width = size[0]; let height = size[1]; src('./favicon.png') .pipe($.imageResize({ width, height, crop: true, upscale: false })) .pipe($.imagemin()) .pipe($.rename(`favicon-${width}x${height}.png`)) .pipe(dest('./dist/images/iocn')); } done(); } function styles(){ return src('./src/sass/main.scss') .pipe($.sass()) .pipe(dest('./dist/css')); } exports.icon = icon; exports.styles = styles; package.json { "name": "gulp_test", "version": "1.0.0", "main": "index.js", "license": "MIT", "devDependencies": { "gulp": "^4.0.2", "gulp-image-resize": "^0.13.1", "gulp-imagemin": "^7.1.0", "gulp-load-plugins": "^2.0.7", "gulp-rename": "^2.0.0", "gulp-sass": "^5.1.0", "sass": "^1.50.1" }, "gulp-config": { "sizes": [ [ 16, 16 ], [ 24, 24 ], [ 32, 32 ], [ 48, 48 ], [ 57, 57 ], [ 64, 64 ], [ 76, 76 ], [ 120, 120 ], [ 128, 128 ], [ 152, 152 ], [ 167, 167 ], [ 180, 180 ], [ 192, 192 ], [ 256, 256 ], [ 512, 512 ] ] } }
自分で試したこと
エラーで出ているとおりconst sass = require('gulp-sass')(require('sass'));を定義して実行してみたが結果は同じ。gulp-sassのバージョンも問題なさそうですが、、、
ちなみに学習しているURLはこちらです。
https://www.youtube.com/watch?v=ptJ1tacAbTY&list=PLC_Jqbgu7I6ag6Xie7_J2HZYtPpIZBvCW&index=7
まだ回答がついていません
会員登録して回答してみよう