5

私はgulpfile.jsでこれを試しています：

gulp.task('buildStyles', function() { 
  return gulp.src([
    './styles/less/main.less',
    './styles/less/widgets/widgets.less',
    './styles/less/pages/pages.less',
    './styles/less/themes/default.less',
    './styles/less/rtl/rtl.less'
  ])
  .pipe(plumber())
  .pipe(sourcemaps.init())
  .pipe(less())
  .pipe(concat('allmin.css'))
  .pipe(sourcemaps.write('./maps'))
  .pipe(gulp.dest('./dest'));
});

しかし、私はいつも次のようなメッセージを受け取ります:

$ gulp buildStyles
[18:46:31] Using gulpfile /Library/WebServer/Documents/qjt2015/trunk/gulpfile.js
[18:46:31] Starting 'buildStyles'...
gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/support-tickets.less
gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/comments.less
gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/article-comments.less
gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/threads.less
gulp-sourcemap-write: source file not found:/Library/WebServer/Documents/qjt2015/trunk/styles/less/chat.less

私はすべての less ファイル内で @imports を使用していますが、参照はメッセージに見つからないように見えるものです。たとえば、私の widgets.less ファイルは次のとおりです。

// ### Bootstrap's variables andmixins
@import "../../../bower_components/bootstrap/less/variables.less";
@import "../../../bower_components/bootstrap/less/mixins.less";
@import '../variables.less';
@import '../mixins.less';

@import './support-tickets.less';
@import './comments.less';
@import './article-comments.less';
@import './threads.less';
@import './chat.less';

何か不足していますか？事前に、助けてくれてありがとう！

4

1 に答える 1

4

paths@import ディレクティブで指定されたファイルの検索を開始する場所を指定するには、gulp-lessのオプションを指定するだけです。

たとえば、 ではwidgets.less、検索しようとしています

  • support-tickets.less
  • comments.less
  • article-comments.less

  • 等..

    に（投稿したエラーメッセージを参照）、（ファイルに関連して）Library/WebServer/Documents/qjt2015/trunk/styles/less/にあるはずだと思いますLibrary/WebServer/Documents/qjt2015/trunk/styles/less/widgets/widgets.less

次のようにパスを設定するだけです。

gulp.task('buildStyles', function() { 
  return gulp.src([
     // ...
  ])
  // ... other gulp tasks here
  .pipe(less({
     paths: [
       '/Library/WebServer/Documents/qjt2015/trunk/styles/less/',
       '/Library/WebServer/Documents/qjt2015/trunk/styles/less/widgets/',
       '/Library/WebServer/Documents/qjt2015/trunk/styles/less/pages/',
       // add additional paths here for less to find imports in
       // less will tell you which import files it can't find, so simply tell it where to find them.

     ]
  ))
  .pipe(concat('allmin.css'))
  // ...
});

```

于 2014-10-13T07:33:08.953 に答える