5

我使用 NPM 和 Gulp 作为我的包管理器和构建系统。我已经安装了“gulp-sass”来支持 sass，并安装了“gulp-clean-css”以便我可以@import css 文件内联。我在“_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/'));
});

主文件

以下是可以的

@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

2

对于版本 < 2.4

使用relativeTo,如果你不想变基，你可以使用root配置选项。targetrebase: false

对于版本 >= 2.4

gulp-clean-css 已升级为使用 clean-css 4.x，因此上述选项均不起作用，它们仅提供rebaseTo将重新设置所有路径的选项。

于 2017-06-04T21:18:42.997 回答
-2

我使用relativeTo使它工作。

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

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

这意味着relativeTo +目标路径必须从 gulpfile.js 指向 css assets (fonts, images) 指向的相对目录。

例子 ：

\---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-16T11:38:21.557 回答