Gruntfile.js - Как использовать переменные и переопределить загрузочные переменные?

Question

Я пытаюсь настроить grunt-recess для включения Twitter Bootstrap с переопределенными переменными...

Вот мой Gruntfile.js:

'use strict';

module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),

        recess: {
            plugins: {
                options: {
                    compile: true,
                    compress: true
                },
                files: {
                    'public/css/plugins.css': [
                        'packages/bootstrap/less/bootstrap.less',
                        'packages/font-awesome/less/font-awesome.less',
                        'assets/less/my-variables.less',
                        // and more...
                    ]
                }
            }, // plugins
        },
    });

    // ...you know
};

В этом случае "my-variables.less" не используется... Сейчас я добавляю его своими маленькими ручками в "packages/bootstrap/less/bootstrap.less".

Очевидно, что это не очень хорошая практика...

Кто-нибудь может сказать мне, как я могу переопределить переменные Bootstrap, используя grunt и фактически не редактируя пакет Bootstrap?

Answer 1

Мое предложение было бы создать папку "public/custom" для вас меньше переопределить файлы.

Включите следующие файлы "custom-bootstrap.less", "custom-other.less", "custom-variables.less" в пользовательскую папку.

Включите следующие файлы импорта в файл "custom-bootstrap.less"

@import "../less/bootstrap.less";
@import "custom-variables.less";
@import "custom-other.less";
@import "../less/utilities.less";

Затем в вашем файле grunt сделать что-то вроде

recess: {
  options: {
    compile: true
  },
  custom_bootstrap: {
    src: ['custom/custom-bootstrap.less'],
    dest: 'dist/css/custom-<%= pkg.name %>.css'
  }
}

Тогда вам просто нужно будет включить "custom-bootstrap.css" в ваш проект, и это заменит все существующие стили.

Эта статья из журнала Smashing действительно хорошо объясняет настройку начальной загрузки.

Будьте осторожны с относительными путями и убедитесь, что они указывают на меньшее количество файлов в зависимости от вашего проекта. Эта структура основана на загрузочной версии 3.0.3.