Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>This isn't a bug. Grunt no longer supports globbing in <code>dest</code> using that configuration. However, you can use the "files array" format, like this:</p> <pre><code>files: [ { expand: true, cwd: 'src', src: ['*.less'], dest: 'assets/css/', ext: '.css' } ] </code></pre> <p>Also, if you use a library like Bootstrap and you want to build each LESS file (component) into a separate, individual CSS file, it's not very easy to accomplish "out of the box". The reason is that each LESS file would need to have its own <code>@import</code> statements for <code>variables.less</code> and <code>mixins.less</code> (and a couple of others like <code>forms.less</code> and <code>navbar.less</code>, since they are referenced in other files).</p> <p>To make this really easy, try the Grunt plugin, <a href="https://github.com/assemble/assemble-less">assemble-less</a> (disclaimer: I'm one of the maintainers of the project, and I'm also on the core team for less.js). assemble-less is a fork of grunt-contrib-less by Tyler Kellen, but it adds some experimental features that will accomplish what you need (if you want stability, please stick with grunt-contrib-less). For example:</p> <pre><code>// Project configuration. grunt.initConfig({ less: { // Compile all targeted LESS files individually components: { options: { imports: { // Use the new "reference" directive, e.g. // @import (reference) "variables.less"; reference: [ "bootstrap/mixins.less", "bootstrap/variables.less" ] } }, files: [ { expand: true, cwd: 'bootstrap/less', // Compile each LESS component excluding "bootstrap.less", // "mixins.less" and "variables.less" src: ['*.less', '!{boot,var,mix}*.less'], dest: 'assets/css/', ext: '.css' } ] } } ... } </code></pre> <p>The <code>imports</code> feature essentially prepends the specified <code>@import</code> statements onto the source files. The <code>reference</code> option allows you to "reference" other less files while only outputting styles that are specifically referenced via mixins or <code>:extend</code>. You might need to reference a few more files than shown here, since Bootstrap cross-references styles from other components, like forms.less, buttons.less, etc. (See <a href="https://github.com/assemble/assemble-less/blob/master/Gruntfile.js">the Gruntfile in assemble-less</a> for examples.)</p> <p>So after running the <code>assemble-less</code> task with the configuration in the example above, the <code>assets/css</code> folder would have:</p> <ul> <li><code>alerts.css</code></li> <li><code>badges.css</code></li> <li><code>breadcrumbs.css</code></li> <li><code>button-groups.css</code></li> <li><code>buttons.css</code></li> <li><code>carousel.css</code></li> <li><code>close.css</code></li> <li><code>code.css</code></li> <li><code>component-animations.css</code></li> <li><code>dropdowns.css</code></li> <li><code>forms.css</code></li> <li><code>glyphicons.css</code></li> <li><code>grid.css</code></li> <li><code>input-groups.css</code></li> <li><code>jumbotron.css</code></li> <li><code>labels.css</code></li> <li><code>list-group.css</code></li> <li><code>media.css</code></li> <li><code>modals.css</code></li> <li><code>navbar.css</code></li> <li><code>navs.css</code></li> <li><code>normalize.css</code></li> <li><code>pager.css</code></li> <li><code>pagination.css</code></li> <li><code>panels.css</code></li> <li><code>popovers.css</code></li> <li><code>print.css</code></li> <li><code>progress-bars.css</code></li> <li><code>responsive-utilities.css</code></li> <li><code>scaffolding.css</code></li> <li><code>tables.css</code></li> <li><code>theme.css</code></li> <li><code>thumbnails.css</code></li> <li><code>tooltip.css</code></li> <li><code>type.css</code></li> <li><code>utilities.css</code></li> <li><code>wells.css</code></li> </ul> <p>There are other features that should help you with this, but the <strong><code>imports</code></strong> feature is super powerful since it allows you to add directives directly to the Gruntfile. </p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload