2

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

Вот мой 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 
}; 

В этом случае, 'мой-variables.less' является не используется ... В настоящее время я добавляю его своими собственными маленькими руками внутри «packages/bootstrap/less/bootstrap.less».

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

ли каждый мог сказать мне, как я могу переопределить Bootstrap переменные с помощью хрюканье и без фактического редактирования Bootstrap пакета?

+0

Возможно, это просто братство монахов, но я не знаю, почему ваш вопрос был опущен. Я потратил часы, пытаясь понять, как сделать то же самое. Я думаю, что ваш фактический вопрос, возможно, потерялся в деталях. Фактический вопрос ... «Как я могу переопределить переменные Bootstrap, используя grunt и без редактирования пакета Bootstrap?» У меня также есть этот вопрос. –

ответ

1

Мое предложение состояло в том, чтобы создать «общедоступную/обычную» папку для вас, чтобы вы могли переопределять файлы.

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

Включить следующий импорт в «настраиваемых-bootstrap.less» файл

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

Тогда в файле хрюкать сделать что-то вроде

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

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

Этот article из журнала разгрома объясняет, что настройка бутстрапа очень хорошо.

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