如何自動更新相對CSS路徑以縮小？

我想更新用於縮小率都相對路徑，因爲我用單獨的文件夾爲每個JS/CSS組件和文件夾的深度，也可以爲每個組件不同，例如：如何自動更新相對CSS路徑以縮小？

css/ 
    style.min.css // final minified and processed file 
    common.scss 
    components/ 
     gallery/ 
      gallery.scss // url(../../../img/mypic.png) 
img/ 
    mypic.png

縮小後，我的風格在style.min.css仍然會有../../../img/mypic.png。但是，它必須更新到../img/mypic.png，否則webbrowsers將無法找到圖片。

如何自動使用PostCSS或其他軟件包進行此操作？

我發現postcss-url項目，它提供了一個自定義URL轉換功能，但我沒有找到任何示例如何做到這一點。

現在我使用gulp,nodejs,autoprefixer和postcss爲我的縮小。

來源

2016-09-22 James Smith

如果您希望我們爲您的構建提供幫助，實際提供構建代碼將會有幫助。閱讀[問]和[mcve]。 –

postcss-url中有一個參數url，可用於將自定義函數傳遞給postcss-url。該功能將能夠修改postcss-url的URL，但必須手動編寫代碼。以下是我在項目中使用的內容：

var outDir = './src/css'; // output folder for CSS 
gulp.task('min:css', function() { 
    return gulp 
     .src(cssInput) 
     .pipe(postcss([ 
      autoprefixer(), 
      postcssurl({ 
       // this function will modify URLs 
       url: function (asset) { 
        if (!asset.url || asset.url.indexOf("base64") !== -1) { 
         return asset.url; 
        } 
        return path.relative(outDir, asset.absolutePath).split("\\").join("/"); 
       } 
      }) 
     ])) 
     ... 
});

來源

2016-09-22 17:12:04

如何自動更新相對CSS路徑以縮小？

回答

相關問題