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（）的正确相对路径

回答

相关问题