5

パッケージ マネージャーとビルド システムに NPM と Gulp を使用しています。「gulp-sass」をインストールしてsassをサポートし、「gulp-clean-css」をインストールして、cssファイルをインラインで@importできるようにしました。「_frontend/scss/**/*」で SCSS ファイルをキャプチャし、「assets/frontend/css/styles.css」として単一のファイルにコンパイルします。出力場所には、"css" の兄弟である "fonts"、"img"、および "js" という他の重要なリソース フォルダーがあります。

私の問題は、「*.css」ファイルをインポートしているときに、ターゲットへの url() 相対パスを正しく取得できないことです。ただし、「.scss」ファイルをインポートしている場合は問題ありません。

これが私のコードです(質問を簡単にするためにソースマップ、エラーログなどを取り出しました):

GULPFILE.JS

gulp.task('styles', function() {
    gulp.src(styles.src)
        .pipe(sassGlob())                                   // Support for bundle requires for Sass
        .pipe(cleanCSS({
            // relativeTo: './node_modules',    <-- I tried with different variations here, no luck
            // root: './node_modules',          <-- I tried with different variations here, no luck
            processImport: true
        }))
        .pipe(rename('styles.css'))                      // Name output CSS file
        .pipe(gulp.dest('../assets/frontend/css/'));
});

メイン.SCSS

以下でOKです

@import "font-awesome/scss/font-awesome.scss";

出力は正しい相対パスで出力されるようです サンプル出力: url(../fonts/FontAwesome/fontawesome-webfont.eot?v=4.6.1)

以下はありません

@import '../node_modules/jquery-ui/themes/base/jquery-ui.css';

サンプル出力: url(../node_modules/jquery-ui/themes/base/images/animated-overlay.gif) ^^ 上記は何らかの方法で「../node_modules」を追加します。 どういうわけかこれを「../img/vendor/jquery-ui/what/ever/i/like/here」に設定したい

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

_frontend    
 ├─fonts
 │  ├─Beamstyle-Icons
 │  └─Gotham-Light-Regular
 ├─node_modules
 │  ├─jquery-ui
 │  │  ├─scripts
 │  │  └─themes
 │  │      ├─base
 │  │         ├─images
 │  │         └─minified
 │  │             └─images
 │  └─ (other stuff...)
 │
 ├─scripts
 │  ├─app
 │  └─vendor
 └─scss
     ├─config
     ├─helpers
     │  ├─classes
     │  ├─functions
     │  ├─mixins
     │  └─placeholders
     └─src
         ├─blocks
         └─components
assets
 └─frontend
    ├─css
    ├─fonts
    ├─img
    │  ├─Beamstyle-Icons
    │  ├─FontAwesome
    │  └─Gotham-Light-Regular
    └─js

誰かがこれについて助けることができれば素晴らしいでしょう。

4

2 に答える 2