12

SASS ファイルをコンパイルする際に問題が発生し、メインの scss ファイルに必要なものを分割してインポートしています。

以下を含むスタイルフォルダーがあります。

main.scss

top_menu.scss

main.scss にいくつかのインポートを追加しました。

@import 'font-awesome';
@import 'bootstrap';
@import 'custom_bootstrap';    
@import 'top_menu';

私のgulp-sassタスクは次のようになります

gulp.task('compile_sass', ['compile_bower_sass'], function () {
  return gulp.src(paths.scss_files, {base:'src'})
    .pipe(gulp.dest(paths.dist))
    .on('error', gutil.log)
    .pipe(sass().on('error', sass.logError))
    .pipe(minifycss({
      keepSpecialComments: false,
      removeEmpty: true
    }))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest(paths.dist))
});

paths.scss_files 変数は次のように設定されています。

scss_files: './src/assets/styles/**/*.scss'

タスクを実行すると、次のエラーが表示されます。

インポートするファイルが見つからないか読み取れません: top_menu

私は実際に自分のscssを別々の関連するサブフォルダーに分割してから、 @import: 'navigation\top_menu' のようなものを使用できるようにしたいと考えています。

なぜこのエラーが発生するのでしょうか?

ありがとう

編集：

compile_bower_sass タスクは、main.scss の @import 行からわかるように、必要な他のいくつかの scss ファイル (font-awesome、bootstrap、custom_bootstrap) をコンパイルします。

compile_sass タスクを実行して出力 (dist) フォルダーを確認すると、compile_bower_sass タスクから css ファイルが生成されていることがわかります (つまり、font-awesome.css、bootstrap.css、custom_bootstrap.min.css)。top_menu.scss ファイルもコピーされますが、コンパイルされないことに気付きました。これがエラーの原因だと思います。

タスクで順序を指定する必要があるので、main.scss を最後にコンパイルして、カスタムの top_menu.scss などの必要なファイルが最初にコンパイルされ、メイン ファイルがアクセスできるようにすることができますか?

編集2

わかりましたので、これはコンパイルの順序にかかっていたという私の考えは正しいと思います。

scss_files 変数を変更して、gulp-sass にパイプされる順序を明示的に設定すると (今回は、さらにフォルダーに整理しました)

scss_files:          ['./src/assets/styles/custom_bootstrap.scss',
                        './src/assets/styles/navigation/top_menu.scss',
                        './src/assets/styles/navigation/user_toolbar.scss',
                        './src/assets/styles/main.scss']

これで、元の compile-sass タスクがそのまま機能します。

では、次の質問は、main.scss ファイルが最後にコンパイルされるように、gulp-sass をどのように構成すればよいかということです。それとも、私はこれをすべて間違った方法で行っていますか?

編集3：

最初にこの質問をするときに、おそらくこれらの追加のタスク構成を追加する必要がありました。したがって、compile_sass タスクでは、compile_bower_sass を最初に実行する必要があります。

    /*-BOWER PACKAGEs INCLUSION --------------------------------------------*/
    gulp.task('compile_bower_sass', ['compile_bower_css'], function(){
      var sassFiles = mainBowerFiles('**/*.scss');
      return gulp.src(sassFiles)
        .pipe(rename(function(path){
          path.basename = path.basename.replace(/^_/, '');
          return path;
          // required where the string begins with _ , meaning that sass won't compile it (bootstrap)
        }))
        .pipe(sass({onError: function(e) { console.log(e); } }))
        .pipe(gulp.dest(paths.dist_styles));
    });

    gulp.task('compile_bower_css', function(){
      var cssFiles = mainBowerFiles('**/*.css');
      return gulp.src(cssFiles)
        .pipe(gulp.dest(paths.dist_styles));
    });

gulp.task('compile_sass', ['compile_bower_sass'], function () {
  return gulp.src(paths.scss_files, {base:'src'})
  .pipe(sass({outputStyle: 'compressed'})
      .on('error',   sass.logError))
  .pipe(rename({suffix: '.min'}))
  .pipe(gulp.dest(paths.dist))
});

私は今で終わっています

インポートするファイルが見つからないか読み取れません: font-awesome

私の dist スタイル フォルダーでは、font-awesome.css が生成されていることがわかります。私は gulp と sass のコンパイルにかなり慣れていないので、ここで何かを誤解していることは間違いありません。

@import ステートメントが使用されている場合、ファイルはその名前の scss ファイルまたは css ファイルを探していますか?

4

4 に答える 4

0

あなたが抱えている問題を再現しようとしましたが、私にとってはうまくいくようです。

私のコードと、比較するフォルダー構造のショットを添付します。

唯一の省略は ['compile_bower_sass'] 部分です。ここで何が必要なのか完全にはわかりません。代わりに loadPath を使用する必要がある可能性はありますか?

また、フォルダーのスクリーンショットから、scss ファイルが dist にもコピーされていることがわかります。これは望ましくない場合があります。

Gulp コードは次のとおりです。

var gulp = require('gulp');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var gutil = require('gulp-util');

var paths = {
  scss_files: './src/assets/styles/**/*.scss',
  dist: './dist'
};

gulp.task('compile_sass', function () {
  return gulp.src(paths.scss_files, {base:'src'})
    .pipe(gulp.dest(paths.dist))
    .on('error', gutil.log)
    .pipe(sass().on('error', sass.logError))
    .pipe(minifycss({
      keepSpecialComments: false,
      removeEmpty: true
    }))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest(paths.dist))
});

フォルダーは次のとおりです: http://take.ms/AOFND

おそらく必要なのは次のとおりです。

var gulp = require('gulp');
var sass = require('gulp-sass');
var rename = require('gulp-rename');

var paths = {
  scss_files: './src/assets/styles/**/*.scss',
  dist: './dist'
};

gulp.task('compile_sass', function () {
  return gulp.src(paths.scss_files, {base:'src'})
    .pipe(sass({outputStyle: 'compressed'})
        .on('error', sass.logError))
    .pipe(rename({suffix: '.min'}))
    .pipe(gulp.dest(paths.dist))
});
于 2015-06-29T10:18:43.557 に答える