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

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

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

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

Q&A

1回答

2441閲覧

scssのパーシャルについて

退会済みユーザー

退会済みユーザー

総合スコア0

Sass

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

1グッド

0クリップ

投稿2016/11/28 07:24

お世話になります。
久しぶりの質問なのですが、scssのパーシャルについて質問です。

現在scssでパーシャルを使い、機能を分割しようとしていますが、
どうもパーシャルがimportされないようです。
ちなみに@importの記述がなければ問題なくコンパイルされます。
今回には関係ないですが、pugについても問題なくコンパイルされます。
どこが原因か見当もつかないので、どうかお力添えいただければと思います。

どうぞ宜しくお願いいたします。

scss

1//style.scss 2@charset "utf-8"; 3@import "base"; 4 5.page{ 6 background-color : red; 7} 8

scss

1//_base.scss 2$baseColor : #abc000; 3

javascript

1var gulp = require( 'gulp' ); 2var plumber = require( 'gulp-plumber' ); 3var autoprefixer = require( "gulp-autoprefixer" ); 4var pleeease = require( 'gulp-pleeease' ); 5var sass = require( 'gulp-sass' ); 6var pug = require( 'gulp-pug' ); 7 8 9// pug 10gulp.task( 'pug', function buildHTML(){ 11 return gulp.src( 'src/pug/*.pug' ) 12 .pipe( pug( { 13 pretty : true 14 } ) ) 15 .pipe( gulp.dest( 'product/' ) ); 16} ); 17 18// style.css 19gulp.task( 'style-css', function(){ 20 gulp.src( 'src/scss/style.scss' ) 21 .pipe( plumber( { 22 errorHandler : function( err ){ 23 notify.onError( "Error: <%= err.message %>" ); 24 this.emit( 'end' ); 25 } 26 } ) ) 27 .pipe( autoprefixer( { 28 // ☆IEは9以上、Androidは4以上、iOS Safariは8以上 29 // その他は最新2バージョンで必要なベンダープレフィックスを付与する設定 30 browsers : [ "last 2 versions", "ie >= 9", "Android >= 4", "ios_saf >= 8" ], cascade : false 31 } ) ) 32 .pipe( pleeease( { 33 sass : true, autoprefixer : false, minifier : true, mqpacker : true 34 } ) ) 35 .pipe( sass() ) 36 .pipe( gulp.dest( 'product/' ) ); 37} ); 38 39// css/*.css 40gulp.task( 'css', function(){ 41 gulp.src( [ 'src/scss/*.scss', '!src/scss/style.scss' ] ) 42 .pipe( plumber( { 43 errorHandler : function( err ){ 44 notify.onError( "Error: <%= err.message %>" ); 45 this.emit( 'end' ); 46 } 47 } ) ) 48 .pipe( autoprefixer( { 49 // ☆IEは9以上、Androidは4以上、iOS Safariは8以上 50 // その他は最新2バージョンで必要なベンダープレフィックスを付与する設定 51 browsers : [ "last 2 versions", "ie >= 9", "Android >= 4", "ios_saf >= 8" ], cascade : false 52 } ) ) 53 .pipe( pleeease( { 54 sass : true, autoprefixer : false, minifier : true, mqpacker : true 55 } ) ) 56 .pipe( sass() ) 57 .pipe( gulp.dest( 'product/css' ) ); 58} ); 59 60// default 61gulp.task( 'default', function(){ 62 gulp.watch( 'src/pug/*.pug', [ 'pug' ] ); 63 gulp.watch( [ 'src/scss/*.scss', '!src/scss/style.scss' ], [ 'css' ] ); 64 gulp.watch( 'src/scss/style.scss', [ 'style-css' ] ); 65} ); 66
ikuwow👍を押しています

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

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

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

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

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

guest

回答1

0

scssファイル単体(この場合_base.scss)でエラー等出ていませんか?
@charsetの設定など忘れた状態だと、コンパイルで通らないときもあるので確認してみてはいかがでしょうか。

投稿2016/12/07 04:11

T_sa

総合スコア353

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

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

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問