Less CSS - 在開發環境中使用less.js添加供應商前綴

我正在使用LESS和Gulp。我還使用Autoprefixer plugin，它根據Browserlist添加了所有需要的供應商前綴。當爲最終導出創建所有縮小文件時，這種方法非常好。Less CSS - 在開發環境中使用less.js添加供應商前綴

我的問題是：當我在開發環境中使用less.js測試CSS時，沒有添加供應商前綴。看起來，自動前綴只適用於cli。 有沒有辦法用less.js或另一個插件隨時添加供應商前綴？我已經嘗試運行prefixfree後less.js但沒有運氣。

來源

2015-06-22 lampshade

我建議編譯LESS與Gulp進行開發（觀看.less文件的更改，自動重新編譯+ autoprefix，實時重新加載頁面）。通過這種方式，您可以在沒有less.js開銷的情況下運行開發工具，並使用相同版本的LESS進行編譯，從而進行生產。 – pawel

@pawel我想我會用這個解決方案。即使在開發中，從less.js中移除開銷也許是件好事。你可以把它作爲答案嗎？ – lampshade

只需將一個流從gulp-less傳輸到autoprefixer，例如，

gulp.task('styles', [], function() { 
    return gulp.src('less/*.less') 
     .pipe(gulplLss()) 
     .pipe(postcss([autoprefixer()])) 
     .pipe(gulp.dest('css/')); 
} 

gulp.task('watch', function() { 
    gulp.watch('less/*.less', 'styles'); 
}

（這是通過postcss工具，現在推薦的方式使用autoprefixer之前貶低它的autoprefixer線對子級是：.pipe(autoprefixer())）

來源

2015-06-22 09:31:23

我實際上是這樣使用的：'var plugins = [autoprefix，cleancss];'然後'gulp.pipe（less（{plugins：plugins}））''。這是錯誤的或不贊成我這樣做，因爲它目前正常工作。 :) – lampshade

哦，我其實不知道那一個。我仍然希望使用一個gulp插件來完成一項工作，它可以更好地控制發生的事情。因爲它看起來:) –

有一個純粹的前端解決方案（如果它是你在找什麼對於）。 Autoprefixer可以在瀏覽器環境中運行。您不必將其作爲Less插件運行。

在estFiddle我在編譯Less後運行Autoprefixer到CSS中，它可以工作。（你可以看到源代碼here。）

來源

2015-07-10 17:05:01 Justineo

Less CSS - 在開發環境中使用less.js添加供應商前綴

回答

相關問題