0

したがって、正しいディレクトリにソース マップを作成し、sourceMappingURL (正しいマップへのリンク)を css ファイルに追加し、正しい sourceRoot を css.map に書き込む gulpセットアップ(リモート サーバー)を実行しています。

ただし、要素のスタイルを確認すると、コンパイルされた css ファイルを指し続けます。(source.scss ファイルの代わりに)

これが私のディレクトリ構造です：

開発 -
| | |
| | scss -
| | |
| | main.scss 製品
-
        |
        CSS -
               |
                 main.css
                 main.min.css
                 main.min.css.map

私のソース マッピング URLは次のmain.min.cssとおりです: sourceMappingURL=main.min.css.map
ソース ルートmain.min.css.mapは次のとおりです: "sourceRoot":"../../dev/scss


" 

gulp.task('styles', function() {
  return sass('site/lvh2016/dev/scss/main.scss', { sourcemap: true, style: 'compact' })
    .pipe(sourcemaps.init())
    .pipe(autoprefixer('last 2 version'))
    .pipe(gulp.dest('site/lvh2016/prod/css'))
    .pipe(rename({ suffix: '.min' }))
    .pipe(cssnano())
    .pipe(sourcemaps.write('.', {
        includeContent: false,
        sourceRoot:'../../dev/scss'
    }))
    .pipe(gulp.dest('site/lvh2016/prod/css'));
});

私のページインスペクターがソースの .scss ファイルを指していない理由を知っている人はいますか? ではなく、縮小された .css をソースとして表示しますか?

4

0 に答える 0