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

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

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

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

2504閲覧

SASSが自動コンパイルされない

KY1212

総合スコア17

Sass

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

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/04/04 13:09

編集2021/04/04 16:05

SASSが自動コンパイルしてくれなくなりました。
--watchが効いていないっぽいんですがなにが原因なのでしょうか、
自動コンパイルしてくれないだけでコマンド叩けばコンパイル自体はしてくれます。

app.scssにパーシャルファイルのパスを読み込んでそれをコンパイル、吐き出し先をCSSディレクトリ直下に指定しています。

コマンド
$ sass style.scss:../../css/style.css --style expanded --watch

階層
/assets

├── css
│   ├── style.css
│   └── style.css.map

└── sass
├── Foundation
│   ├── _base.scss
│   ├── _reset.scss
│   ├── _var.scss
│   ├── base.css.map
│   ├── style.css.map
│   └── style.scss
├── Layout
│   ├── _footer.scss
│   ├── _header.scss
│   ├── _main.scss
│   ├── _sidebar.scss
│   ├── footer.css.map
│   ├── header.css.map
│   ├── main.css.map
│   └── sidebar.css.map
└── Object
├── _components.scss
├── _utility.scss
├── components.css.map
└── utility.css.map

gulp.js

var gulp = require('gulp'); var sass = require('gulp-sass'); var sassGlob = require('gulp-sass-glob'); gulp.task('sass', function() { return gulp.src('./sass/**/*.scss') .pipe(plumber({errorHandler: notify.onError("Error:<%= error.message %>")})) .pipe(sassGlob()) .pipe(sass({outputStyle: 'expanded'})) .pipe(postcss([mqpacker()])) .pipe(postcss([cssdeclsort({order: 'alphabetical'})])) .pipe(postcss([autoprefixer()])) .pipe(gulp.dest('./css')); }); gulp.task( 'default', function() { gulp.watch( './sass/**/*.scss', gulp.task('sass')); });

========補足=========
現状
わざわざコマンドを打ち直さなくても、style.scss(コンパイルするファイル)を更新かけるとコンパイルされました。
ただ、やはりパーシャルファイルのみ更新してもコンパイルされるようにしたいです。
イメージ説明

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

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

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

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

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

guest

回答1

0

自己解決

階層を変えたらいけました。
今回の場合、Foundationにコンパイル用ファイルを置いちゃってたんで、それが原因でFoundation内のパーシャルしかコンパイルされなかったっぽいです。

Foudationディレクトリから出してコンパイルファイルのパスを同じ深さで統一することで解決しましすた。

投稿2021/04/04 16:20

KY1212

総合スコア17

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.48%

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

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

質問する

関連した質問