パッケージ マネージャーとビルド システムに 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
誰かがこれについて助けることができれば素晴らしいでしょう。