更改使用Grunt編譯的引導程序輸出LESS文件

Question

默認情況下，Grunt將bootstrap.less編譯爲bootstrap.css。問題是如何讓它編譯我的自定義styles.less，我要將所有Bootstrap less文件以及我自己的一些文件導入到styles.css中？

Answer 1

認爲這個問題有很多答案。我認爲你應該遵循@ seven-phases-max的建議，並且儘量不要修改源代碼（或者至少做一點改動）。

在你Gruntfile.js，你會發現，少了兩個編譯參數（compileCore和compileTheme）：

less: { 
    compileCore: { 
    options: { 
     strictMath: true, 
     sourceMap: true, 
     outputSourceFiles: true, 
     sourceMapURL: '<%= pkg.name %>.css.map', 
     sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map' 
    }, 
    src: 'less/bootstrap.less', 
    dest: 'dist/css/<%= pkg.name %>.css' 
    }, 
    compileTheme: { 
    options: { 
     strictMath: true, 
     sourceMap: true, 
     outputSourceFiles: true, 
     sourceMapURL: '<%= pkg.name %>-theme.css.map', 
     sourceMapFilename: 'dist/css/<%= pkg.name %>-theme.css.map' 
    }, 
    src: 'less/theme.less', 
    dest: 'dist/css/<%= pkg.name %>-theme.css' 
    } 
} 

而下面的任務定義：grunt.registerTask('less-compile', ['less:compileCore', 'less:compileTheme']);

應該很容易添加自己的子任務，編譯參數。當你這樣做時，你可以編譯你的styles.less到styles.css。注意你有一個分離的CSS文件作爲結果。加載該文件需要額外的http請求。

除非您在styles.less中導入引導程序的Less代碼，否則您不能重用Bootstrap的變量和mixins。如果你需要一個分開的CSS文件考慮創建styles.less如下：

@import (reference) "bootstrap"; 
//your custom code here 

在，你可以編譯你的代碼在一個CSS文件的情況下，你可以做到以下幾點：

1. 創建一個文件custom.less並在該文件中添加自定義。並將該文件保存在與bootstrap.less文件相同的文件夾中。
2. 不是在bootstrap.less文件的末尾寫下面的代碼：@import "custom";

之後，你可以編譯引導作爲一般。

或者創建custom.less如下：

@import "bootstrap"; 
//your custom code here 

編譯custom.less而不是bootstrap.less默認情況下，你應該有修改Gruntfile.js。在CompileCore參數中將src選項更改爲src: 'less/custom.less',。