1 | > Basic config for compiling LESS to CSS.
|
2 |
|
3 | ```js
|
4 | less: {
|
5 | development: {
|
6 | options: {
|
7 | paths: ["assets/css"]
|
8 | },
|
9 | files: {
|
10 | "path/to/result.css": "path/to/source.less"
|
11 | }
|
12 | },
|
13 | production: {
|
14 | options: {
|
15 | paths: ["assets/css"],
|
16 | compress: true
|
17 | },
|
18 | files: {
|
19 | "path/to/result.css": "path/to/source.less"
|
20 | }
|
21 | }
|
22 | }
|
23 | ```
|
24 |
|
25 | ## lessrc
|
26 |
|
27 | A `.lessrc` file must contain valid JSON and look something like this:
|
28 |
|
29 | ```json
|
30 | {
|
31 | "compress": true,
|
32 | "metadata": "src/*.{json,yml}",
|
33 | "paths": ["vendor/bootstrap/less"]
|
34 | }
|
35 | ```
|
36 |
|
37 | A `.lessrc.yml` must contain valid YAML and look something like this:
|
38 |
|
39 | ```yaml
|
40 | compress: true
|
41 | paths:
|
42 | - vendor/bootstrap/less
|
43 | ```
|
44 |
|
45 | ## Import directives
|
46 |
|
47 | > Prepend `@import` statements to `src` files using any of the new `@import` directives released after Less.js v1.5.0.
|
48 |
|
49 | Options are:
|
50 |
|
51 | * `reference`: use a less file but do not output it
|
52 | * `inline`: include the source file in the output but do not process as less
|
53 | * `less`: treat the file as a less file, no matter what the file extension
|
54 | * `css`: treat the file as a css file, no matter what the file extension
|
55 |
|
56 | ```javascript
|
57 | less: {
|
58 | options: {
|
59 | paths: 'vendor/bootstrap/less',
|
60 | imports: {
|
61 | reference: ['variables.less', 'mixins.less'],
|
62 | inline: ['normalize.css'],
|
63 | less: ['normalize.css'],
|
64 | css: ['foo.css', 'bar.css']
|
65 | }
|
66 | },
|
67 | files: {}
|
68 | }
|
69 | ```
|
70 |
|
71 | ## Compile individual bootstrap components
|
72 |
|
73 | > Use import directives to compile each [Bootstrap's](https://github.com/twbs/bootstrap) LESS components separately.
|
74 |
|
75 | Using the `imports: {}` option and the "files array format" enables us to compile each Bootstrap LESS component without having to add `@import "variables.less";` and `@import "mixins.less";` to
|
76 | every file.
|
77 |
|
78 | ```javascript
|
79 | less: {
|
80 | options: {
|
81 | paths: 'vendor/bootstrap/less',
|
82 | imports: {
|
83 | reference: ['variables.less', 'mixins.less'],
|
84 | }
|
85 | },
|
86 | components: {
|
87 | files: [
|
88 | { expand: true, cwd: 'vendor/bootstrap/less', src: '*.less', dest: 'assets/css/', ext: '.css' }
|
89 | ]
|
90 | }
|
91 | }
|
92 | ```
|
93 |
|
94 | ## Pass metadata to Lo-Dash templates
|
95 |
|
96 | Use the `metadata` option to pass context to Lo-Dash templates before compiling. For example, let's say you have a config like this:
|
97 |
|
98 | ```javascript
|
99 | less: {
|
100 | options: {
|
101 | metadata: 'src/*.{json,yml}'
|
102 | },
|
103 | styles: {
|
104 | files: {
|
105 | 'css/style.css': ['src/style.less']
|
106 | }
|
107 | }
|
108 | }
|
109 | ```
|
110 |
|
111 | and a data file, `palette.yml`, with some variables defined:
|
112 |
|
113 | ```yaml
|
114 | # palette.yml
|
115 | info: '#000'
|
116 | warning: '#111'
|
117 | danger: '#222'
|
118 | success: '#333'
|
119 | ```
|
120 |
|
121 | Then in our LESS file:
|
122 |
|
123 | ```scss
|
124 | // Use as values to variables
|
125 | @palette-info: <%= palette.info %>;
|
126 | @palette-warning: <%= palette.warning %>;
|
127 |
|
128 | .swatch-info {
|
129 | background: @palette-info;
|
130 | }
|
131 | .swatch-warning {
|
132 | background: @palette-warning;
|
133 | }
|
134 |
|
135 | // or directly as variables
|
136 | .swatch-danger {
|
137 | background: <%= palette.danger %>;
|
138 | }
|
139 | .swatch-success {
|
140 | background: <%= palette.success %>;
|
141 | }
|
142 | ```
|