Объединение файлов less и css вместе

Question

Я считаю, что объединение следует использовать для группировки набора файлов, которые вы используете вместе, в одну доставку в браузер.Это будет означать, например, что для моего корневого стиля я хотел бы сделать что-то вроде следующего:

var bundle = new StyleBundle("~/Content/style").Include(
    "~/Content/mystyle.less",
    "~/Content/bootstrap.css",
    "~/Content/bootstrap-responsive.css");
bundle.Transforms.Add(new LessTransform());
bundle.Transforms.Add(new CssMinify());
bundles.Add(bundle);    

Но, похоже, это не очень хорошо работает с специальная техника преобразования для объединения меньшего количества файлов поскольку похоже, что он предварительно объединяет все файлы в один файл CSS перед передачей его в LessTransform.Насколько я могу судить, этот метод работает только в том случае, если вы объедините все свои меньшие файлы вместе.

Есть ли способ получить пакеты, позволяющие использовать файлы less и css в одном пакете?

Answer 1

У меня было немного больше взглянуть на это и попробовал использовать пучок вместо стиля, но все еще имел проблемы.Я думаю, что проблема специально связана с файлом Bootstrap.css, имеющим синтаксис, который меньше не нравится.

Answer 2

Да, вы правы, преобразователь объединяет все содержимое CSS/LESS перед передачей его преобразователю.Тем не менее, конвертер не должен перекрывать присутствие LESS и CSS, поскольку вы всегда можете включить стандартный CSS в таблицу стилей LESS.

Кажется, проблема в том, что вы используете StyleBundle объект, с которым уже связан преобразователь.Попробуйте использовать общий Bundle как я делаю в своей конфигурации, вот так:

var customStyles = new Bundle("~/bundle/style/css")
                       .Include("~/Content/normalize.css","~/Content/*.less");
bootstrapStyles.Transforms.Add(new LessTransform());
bootstrapStyles.Transforms.Add(new CssMinify());
bundles.Add(customStyles);

Что касается вашего собственного ответа ниже, проблема с файлом bootstrap.css не в том, что преобразователю LESS он не нравится, а, вероятно, в проблеме с путем для @imports, убедитесь, что ваш преобразователь LESS использует что-то, чтобы гарантировать, что он разрешает правильные пути. к любым таблицам стилей зависимостей.

Answer 3

Я считаю, что все CSS действительны меньше (но не все менее являются действительными CSS)

Таким образом, наличие генеракодицетагкода, применяемого к вашим файлам CSS Bootstrap CSS, не должно иметь никакого значения.

Он все равно будет объединять все файлы в один файл CSS для доставки в браузер.

Там может быть только проблема Performance во время design-time .

правильный вывод все еще будет произведен, и кэширование предотвратит любые <сильные> проблемы выполнения .

Answer 4

Я знаю, что это немного старый пост, но я заметил кое-что странное, что может кому-то пригодиться...

Я нашел это Bundle объекту не нравятся дефисы в имени файла CSS, если в него включено меньше файлов.то есть:

var frontendStyles = new Bundle("~/bundles/frontend.main.css")
            .IncludeDirectory("~/Content/less", "*.less")
            .Include(
                "~/Content/ladda.css",
                "~/Content/jquery.mobile.custom.structure.min.css",
                "~/Content/jquery-ui.1.9.2.custom.css"
            );

У меня не работает, но работает следующее (измените имя файла на jqueryui):

var frontendStyles = new Bundle("~/bundles/frontend.main.css")
            .IncludeDirectory("~/Content/less", "*.less")
            .Include(
                "~/Content/ladda.css",
                "~/Content/jquery.mobile.custom.structure.min.css",
                "~/Content/jqueryui.1.9.2.custom.css"
            );

Итак, изменив имя файла с "~/Content/bootstrap-responsive.css" к "~/Content/bootstrapresponsive.css" вполне мог бы решить проблему для вас.