質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

受付中

gulpを使ってsassをコンパイルさせたい

dai___
dai___

総合スコア0

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

0回答

0評価

1クリップ

126閲覧

投稿2022/04/23 01:34

編集2022/04/23 14:46

解決したいこと
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

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

gulp

gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。