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

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

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

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

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

Q&A

解決済

1回答

3819閲覧

vscodeでsassファイルをコンパイルしてもcssファイルが作成されない

yesman

総合スコア21

Sass

Sassは、プログラミング風のコードでCSSを生成できるスタイルシート言語です。 scss ファイルを、変換(コンパイル)してCSSファイルを作成します。

gulp

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

0グッド

0クリップ

投稿2019/02/24 16:08

編集2019/02/26 06:01

エディターをvscodeに切り替えて、sassで作業したいのですがうまくcssが作成されていないので確認お願い致します。

ターミナルにgulp sass:watchの命令をしてエラーは出ていないのですが、うまくコンパイルがされないです。

ディレクトリ構造は下記になります。distフォルダにコンパイルされたファイルが格納されるようにしたいです。
project
├dist/
│ ├css/
│ └js/
└src/
├js/
└scss/
イメージ説明

gulpfile.js //パス設定 var paths = { 'html' : './dist/', 'scss' : './src/scss/', 'css' : './dist/css/', 'jsSrc' : './src/js/', 'jsDist' : './dist/js/' } var gulp = require('gulp'); var sass = require('gulp-sass'); var sassGlob = require('gulp-sass-glob'); var sourcemaps = require('gulp-sourcemaps'); var autoprefixer = require('autoprefixer'); var mqpacker = require('css-mqpacker'); var plumber = require('gulp-plumber'); var notify = require('gulp-notify'); var postcss = require('gulp-postcss'); sass.compiler = require('node-sass'); gulp.task('sass', function () { return gulp.src(paths.scss + '.**/*.scss') .pipe(plumber({propertyIsEnumerable: notify.onError("Error: <%= error.message %>")})) .pipe(sourcemaps.init()) .pipe(sassGlob()) .pipe(sass().on('error', sass.logError)) .pipe(sass({outputStyle: 'expanded'})) .pipe(postcss([mqpacker()])) .pipe(postcss([autoprefixer({ browsers: ['last 2 versions']})])) .pipe(sourcemaps.write()) .pipe(gulp.dest(paths.css)); }); gulp.task('sass:watch', function () { gulp.watch(paths.scss + '.**/*.scss', gulp.series('sass')); // 変更 });
package.json { "name": "test_project", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "keywords": [], "author": "", "license": "ISC", "devDependencies": { "autoprefixer": "^9.4.7", "css-mqpacker": "^7.0.0", "gulp": "^4.0.0", "gulp-notify": "^3.2.0", "gulp-plumber": "^1.2.1", "gulp-postcss": "^8.0.0", "gulp-sass": "^4.0.2", "gulp-sass-glob": "^1.0.9", "gulp-sourcemaps": "^2.6.4" } }
scss .sample{ display: flex; transform: scale(2); border:{ top: 5px solid #ccc; bottom:{ width: 3px; style:dotted; color:#FFF; } } } .box{ display: flex; justify-content: space-between; background:linear-gradient(to bottom, white, black); transition: all .7s; }
D:\web-date\project> gulp sass:watch [00:45:39] Using gulpfile D:\web-date\project\gulpfile.js [00:45:39] Starting 'sass:watch'...

以上になります。
情報が足りませんでしたら、補足致しますのでご連絡お願い致します。
よろしくお願い致します。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

return gulp.src(paths.scss + '.**/*.scss')

上の文字を下記に変更したところ解決しました、
return gulp.src(paths.scss + './**/*.scss')

ありがとうございました。

投稿2019/02/27 13:41

yesman

総合スコア21

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問