web-dev-qa-db-ja.com

gulp-sass：エラー-インポートするファイルが見つからないか、読み取れません

SASSファイルをコンパイルして、それらを分割し、メインのscssファイルに必要なファイルをインポートするのに問題があります。

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

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))
});

Path.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）フォルダーを見ると、cssファイルがcompile_bower_sassタスクから生成されていることがわかります（つまり、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ファイルを探していますか？

sassgulpgulp-sass
10
mindparse

私は（SierraでMacを使用して）同じ問題を抱えていましたが、グロブスタイルのインクルードを使用している場合にのみ発生したようです。

競合状態が原因であることが判明しました。少し待つのように回避できます...

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

gulp.task('scss', function () {
    gulp.src('resources/scss/**/*.scss')
        .pipe(wait(200))
        .pipe(sass())
        .pipe(gulp.dest('public/dist'));
});
7
synkyo

_@import_行の間に改行を追加します。

私は他の多くの解決策を試しましたが、_"atomic_save": true_の設定に関係するSublimeTextの問題であると示唆するものもありましたが、それは私にはうまくいきませんでした。

.pipe(wait(500))を追加してみました。どちらも機能しませんでした。

次に、問題のある_@import_の前に改行を追加しました。したがって、_top_menu_に関するエラーがスローされる場合は、次のようになるように改行を入れてください。

_@import 'custom_bootstrap';    

@import 'top_menu';
_

理由はわかりませんが、これが私のために働いた唯一のことです。

ベストプラクティスとして、万が一の場合に備えて、すべての行の間に改行を追加します。

4
Max

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

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

ここで何が必要か完全にはわからないため、唯一の省略は['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))
});
0
mistermist