تجميع ملفات أقل وملفات 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.ما يمكنني قوله هو أن هذه الطريقة لا تعمل إلا إذا قمت بتجميع جميع ملفاتك الأقل معًا.

هل هناك طريقة للحصول على حزم للسماح بملفات أقل وملفات CSS في نفس الحزمة؟

Answer 1

كان لدي أكثر من مجرد إلقاء نظرة على هذا وحاول استخدام حزمة بدلا من styleBUndle ولكن لا يزال لديه مشاكل.أعتقد أن هذه القضية تتعلق بالتحديد مع ملف 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 صالح LESS (ولكن ليس كل LESS صالح CSS)

لذلك وجود LessTransform تطبيقها على ملفات bootstrap css الخاصة بك لا ينبغي أن يحدث أي فرق.

وسيظل يجمع جميع الملفات في ملف CSS واحد لتسليمها إلى المتصفح.

قد يكون هناك فقط أ أداء مشكلة خلال وقت التصميم.

سيستمر إنتاج الإخراج الصحيح وسيمنع التخزين المؤقت أي شيء مدة العرض قضايا الأداء.

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" يمكن أن يفرز المشكلة جيدًا لك.