gulp-clean-css cannot set the right relative path for url() for assets such as fonts and images

Question

I use NPM and Gulp for my package manager and build system.\nI have installed "gulp-sass" to support sass, and "gulp-clean-css" so that I can @import css files inline.\nI capture my SCSS files in "_frontend/scss/**/*", and compiles that into a single file as "assets/frontend/css/styles.css".\nIn the output location, I have other important resources folders that are siblings of "css": "fonts", "img", and "js".

\n\n

My problem is I cannot get the url() relative paths to target correctly when I\'m importing a "*.css" file.\nHowever, it is okay when I\'m importing ".scss" files.

\n\n

Here is my code (I took out sourcemaps, error log etc to simplify the question):

\n\n

GULPFILE.JS

\n\n

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

\n\n

MAIN.SCSS

\n\n

The following is OK

\n\n

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

\n\n

Output seems to come out with the correct relative paths\nSample output: url(../fonts/FontAwesome/fontawesome-webfont.eot?v=4.6.1)

\n\n

The following is NOT

\n\n

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

\n\n

Sample output: url(../node_modules/jquery-ui/themes/base/images/animated-overlay.gif)\n^^ The above somehow appends the "../node_modules".\nI want it to somehow set this to "../img/vendor/jquery-ui/what/ever/i/like/here"

\n\n

Here\'s my directory structure.

\n\n

_frontend    \n \xe2\x94\x9c\xe2\x94\x80fonts\n \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80Beamstyle-Icons\n \xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80Gotham-Light-Regular\n \xe2\x94\x9c\xe2\x94\x80node_modules\n \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80jquery-ui\n \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80scripts\n \xe2\x94\x82  \xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80themes\n \xe2\x94\x82  \xe2\x94\x82      \xe2\x94\x9c\xe2\x94\x80base\n \xe2\x94\x82  \xe2\x94\x82         \xe2\x94\x9c\xe2\x94\x80images\n \xe2\x94\x82  \xe2\x94\x82         \xe2\x94\x94\xe2\x94\x80minified\n \xe2\x94\x82  \xe2\x94\x82             \xe2\x94\x94\xe2\x94\x80images\n \xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80 (other stuff...)\n \xe2\x94\x82\n \xe2\x94\x9c\xe2\x94\x80scripts\n \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80app\n \xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80vendor\n \xe2\x94\x94\xe2\x94\x80scss\n     \xe2\x94\x9c\xe2\x94\x80config\n     \xe2\x94\x9c\xe2\x94\x80helpers\n     \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80classes\n     \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80functions\n     \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80mixins\n     \xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80placeholders\n     \xe2\x94\x94\xe2\x94\x80src\n         \xe2\x94\x9c\xe2\x94\x80blocks\n         \xe2\x94\x94\xe2\x94\x80components\nassets\n \xe2\x94\x94\xe2\x94\x80frontend\n    \xe2\x94\x9c\xe2\x94\x80css\n    \xe2\x94\x9c\xe2\x94\x80fonts\n    \xe2\x94\x9c\xe2\x94\x80img\n    \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80Beamstyle-Icons\n    \xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80FontAwesome\n    \xe2\x94\x82  \xe2\x94\x94\xe2\x94\x80Gotham-Light-Regular\n    \xe2\x94\x94\xe2\x94\x80js\n

\n\n

Would be great if anyone can help on this.

\n

Answer 1

我使用relativeTo使它工作。

医生说：（https://www.npmjs.com/package/clean-css）

relativeTo -解析相对 @import 规则和 URL 的路径

这意味着relativeTo +目标路径必须从gulpfile.js指向css资源（字体，图像）指向的相对目录。

例子 ：

\---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");