編譯LESS到多個CSS文件，基於可變值

擁有單一變量，指定一個variables.less文件（例如@themeColor: #B30F55;）內的一種顏色，而一個.json文件構成的實體的列表，其中每個鍵是一個實體ID和關鍵的值是那個實體的顏色（例如'8ab834f32' : '#B30F55', '3cc734f31' : '#99981F'），在替換變量值之後，我怎麼能運行一個Grunt任務來輸出與json中的實體一樣多的獨立CSS文件？編譯LESS到多個CSS文件，基於可變值

來源

2014-11-05 Andrei Oniga

您可以爲每種顏色定義不同的任務。咕嚕-的contrib少支持Modifyvars選項：

modifyVars

類型：Object默認值：無

覆蓋全局變量。相當於--modify-vars ='VAR = VALUE' 選項較少。

您可以設置modifyVars: themeColor={yourcolor}爲每個任務構成實體

列表

以.json文件

參見：Grunt - read json object from file

的其他例子可以在Dynamic Build Processes with Grunt.js

找到

例如

colors.json：

{ 
"colors" : [ 
{"color" : "#B30F55", "name" : "8ab834f32"}, 
{"color" : "#99981F", "name" : "3cc734f31"} 
] 
}

Gruntfile.js：

module.exports = function (grunt) { 
    'use strict'; 
grunt.initConfig({ 
     pkg: grunt.file.readJSON('package.json'), 
}); 
grunt.loadNpmTasks('grunt-contrib-less'); 
var allTaskArray = []; 
var colors = grunt.file.readJSON('colors.json').colors; 
var tasks = {}; 
for (var color in colors) { 
var dest = 'dist/css/' + [colors[color].name] + '.css'; 
tasks[colors[color].name] = {options: { 
      strictMath: true, 
      outputSourceFiles: true, 
      modifyVars: {} 
     },files:{} }; 
tasks[colors[color].name]['files'][dest] = 'less/main.less';  
tasks[colors[color].name]['options']['modifyVars']['color'] = colors[color].color; 
allTaskArray.push('less:' + colors[color].name); 
} 
grunt.config('less',tasks); 
grunt.registerTask('default', allTaskArray); 
};

更少/ main.less：

@color: red; 
p{ 
color: @color; 
}

不是運行grunt：

運行「少：8ab834f32」（更少）任務文件DIST/CSS/8ab834f32.css 創建：24 B→24 B

運行「少：3cc734f31」（更少）任務文件DIST/CSS/3cc734f31。 css 已創建：24 B→24 B

完成，沒有錯誤。

貓DIST/CSS/3cc734f31.css：

p { 
    color: #99981f; 
}

來源

2014-11-05 07:51:32

編譯LESS到多個CSS文件，基於可變值

回答

相關問題