gulp-clean-css無法爲資源（如字體和圖像）設置url（）的正確相對路徑

我使用NPM和Gulp作爲我的包管理器和構建系統。我已經安裝了「gulp-sass」來支持sass和「gulp-clean-css」，這樣我就可以@import嵌入css文件。我在「_frontend/scss/**/*」中捕獲我的SCSS文件，並將其編譯爲「assets/frontend/css/styles.css」單個文件。在輸出位置，我有其他重要的資源文件夾是「css」：「fonts」，「img」和「js」的兄弟。gulp-clean-css無法爲資源（如字體和圖像）設置url（）的正確相對路徑

我的問題是當我導入「* .css」文件時，我無法正確獲取url（）相對路徑。但是，當我導入「.scss」文件時可以。

這裏是我的代碼（我拿出sourcemaps，錯誤日誌等，以簡化的問題）：

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

MAIN.SCSS

以下是好的

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

輸出似乎出來以正確的相對路徑示例輸出：URL（？../字體/ FontAwesome/fontawesome-webfont.eot V = 4.6.1）

以下是NOT

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

示例輸出：URL（../ node_modules/jQuery的UI /主題/鹼/圖像/動畫-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

將是巨大的，如果任何人都可以在此幫助。

來源

2016-05-13 Thomas Cheng

-2

我使用了relativeTo。

醫生說：（https://www.npmjs.com/package/clean-css）

對於relativeTo - 路徑決心相對@import規則和URL

這意味着對於relativeTo + 目標路徑絕從gulpfile.js到由css assets（字體，圖像）指向的相對目錄。

實施例：

\---project 
    +---assets 
    | \---stylesheets 
    |  | style.css 
    |  | 
    |  \---dist 
    |    style.min.css 
    | 
    | \---fonts 
    |    my-font.ttf   
    \---gulp 
      gulpfile.js

目標路徑的設定（從gulpfile）到'../assets/stylesheets/dist'

我的任務是：

// Create minified css 
gulp.task('minifycss', function() { 
    return gulp 
     .src('../assets/stylesheets/*.css') 
     .pipe(cleancss({relativeTo: '../assets/', compatibility: 'ie8'})) 
     .pipe(rename({ 
      suffix: ".min"        // add *.min suffix 
     })) 
     .pipe(gulp.dest('../assets/stylesheets/dist')) 
});

輸出：

// style.css : 
    src: url("../fonts/my-font.ttf"); 

// dist/style.min.css : 
    src: url("../../fonts/my-font.ttf");

來源

2016-08-16 11:38:21 migli

對於版本< 2.4

使用relativeTo，root和target，如果你不想衍合你可以使用rebase: false配置選項。

對於版本> = 2.4

一口潔淨的CSS已經升級到使用清潔的CSS 4.x的所以沒有上述工作方案，他們只提供rebaseTo選項，將變基所有的路徑。

來源

2017-06-04 21:18:42

gulp-clean-css無法爲資源（如字體和圖像）設置url（）的正確相對路徑

回答

相關問題