Question

我使用NPM和Gulp作为我的包管理器和构建系统。我已经安装了＆＃34; gulp-sass＆＃34;支持sass，＆＃34; gulp-clean-css＆＃34;这样我就可以@import css文件内联。我在＆＃34; _frontend / scss / ** / *＆＃34;中捕获我的SCSS文件，并将其编译为单个文件中的＆＃34; assets / frontend / css / styles.css＆＃34;。在输出位置，我有其他重要的资源文件夹，它们是＆＃34; css＆＃34;：＆＃34; fonts＆＃34;，＆＃34; img＆＃34;和＆＃34; js＆＃34的兄弟姐妹;

我的问题是当我导入＆＃34; * .css＆＃34;我无法正确定位url（）相对路径。文件。但是，当我导入＆＃34; .scss＆＃34;文件。

这是我的代码（我拿出了源图，错误日志等来简化问题）：

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（../ 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） ^^以上以某种方式附加＆＃34; ../ node_modules＆＃34;。 我希望以某种方式将其设置为＆＃34; ../ img / vendor / jquery-ui / what / ever / i / like / here＆＃34;

这是我的目录结构。

_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

如果有人可以提供帮助，那就太好了。

Answer 1

对于版本＆lt; 2.4

使用it = iter(a) indeces = list(range(len(a) + 4)) dash_indeces = set(random.sample(indeces, 4)) # four random indeces from the available slots a = ['-' if i in dash_indeces else next(it) for i in indeces]，relativeTo和root，如果您不想重新投放，可以使用target配置选项。

对于版本＆gt; = 2.4

gulp-clean-css已升级为使用clean-css 4.x，因此上述选项均无效，且只提供rebase: false选项，这将重新绑定所有路径。

gulp-clean-css无法为字体和图像等资产设置url（）的正确相对路径

1 个答案: