MDL-51582 grunt: add less complilation support
Previously we were using recess to build bootstrap base as it was what was used by the original project. But recess is no longer maintained. Now we use grunt for building js, it makes sense to use it for less too. (If you really don't want to use grunt, you almost certainly can just use lessc -x as it uses the same less.js on backend).
This commit is contained in:
@@ -23,7 +23,7 @@ accessibility and Search Engine Optimization (SEO).
|
||||
|
||||
*less CSS
|
||||
Less CSS is a Object Oriented way of writing CSS code. All Less CSS files
|
||||
for this theme are stored in the /less folder. A developer can use recess
|
||||
for this theme are stored in the /less folder. A developer can use grunt
|
||||
to generate the CSS files in the /style folder. For more
|
||||
information read /less/README
|
||||
|
||||
|
||||
@@ -1,33 +1,16 @@
|
||||
About bootstrap in Moodle
|
||||
-------------------------
|
||||
Compiling LESS
|
||||
--------------
|
||||
|
||||
If you want to make changes to the .css generated from these .less files then you
|
||||
need to use a LESS Compiler. Details on specific compilers and how to install them
|
||||
can be found at http://docs.moodle.org/dev/LESS
|
||||
need to use a less compiler to build your changes. The supported way to achieve this
|
||||
is using grunt.
|
||||
|
||||
At present, recess is the official tool for developers to compile LESS in to CSS, as
|
||||
other tools give different results in the generated CSS.
|
||||
See https://docs.moodle.org/dev/Grunt for details of how to install grunt.
|
||||
|
||||
Once recess has been installed you can compile and compress the LESS in to CSS using
|
||||
the following commands from the "theme/bootstrapbase/less" directory:
|
||||
Once grunt is installed run the 'less' task:
|
||||
|
||||
For the main Moodle styles:
|
||||
$ grunt less
|
||||
|
||||
recess --compile --compress moodle.less > ../style/moodle.css
|
||||
|
||||
And for the subset of styles of interest to the TinyMCE editor:
|
||||
|
||||
recess --compile --compress editor.less > ../style/editor.css
|
||||
|
||||
You can add --watch to make sure it updates every time you make a change.
|
||||
|
||||
If the compilation is failing and you're not getting any useful error message, try using lessc instead i.e.:
|
||||
|
||||
lessc moodle.less
|
||||
|
||||
This is the same tool that's getting called by recess, but the errors seems better if you go direct.
|
||||
|
||||
More information
|
||||
----------------
|
||||
Additional information about the Moodle bootstrap base theme can be found at
|
||||
http://docs.moodle.org/dev/Bootstrap
|
||||
And the css files will be compiled.
|
||||
|
||||
For further info see: https://docs.moodle.org/dev/LESS
|
||||
|
||||
@@ -12,8 +12,7 @@ To update to the latest release of twitter bootstrap:
|
||||
* download the new less files and store them in less/bootstrap
|
||||
* Apply change in MDL-42195 (We don't want responsive images by default).
|
||||
* Apply change in MDL-48328 (We need to reset the width of the container directly, in ./less/bootstrap/navbar.less, using the calculated value found in ./less/bootstrap/mixin.less).
|
||||
* regenerate files using recess: recess --compile --compress moodle.less > ../style/moodle.css **
|
||||
* regenerate files using recess: recess --compile --compress editor.less > ../style/editor.css **
|
||||
* regenerate css files using grunt
|
||||
* update ./thirdpartylibs.xml
|
||||
|
||||
** If you want to make changes to the .css generated from these .less files then you
|
||||
|
||||
Reference in New Issue
Block a user