นำเข้าไฟล์. css เป็นไฟล์ .less

228

คุณสามารถนำเข้าไฟล์. css เป็นไฟล์ .less ... ได้หรือไม่

ฉันคุ้นเคยกับมันน้อยกว่าและใช้เพื่อการพัฒนาของฉันทั้งหมด ฉันใช้โครงสร้างเป็นประจำดังนี้:

@import "normalize";

//styles here

@import "mixins";
@import "media-queries";
@import "print";

การนำเข้าทั้งหมดเป็นไฟล์ .less อื่น ๆ และใช้งานได้ตามที่ควรจะเป็น

ปัญหาปัจจุบันของฉันคือสิ่งนี้: ฉันต้องการนำเข้าไฟล์. css ไปที่. เว้นแต่ว่าการอ้างอิงสไตล์ที่ใช้ในไฟล์. css ดังต่อไปนี้:

@import "../style.css";

.small {
    font-size:60%;
    .type;
}
// other styles here

ไฟล์. css มีคลาสที่เรียกว่า.typeแต่เมื่อฉันพยายามคอมไพล์ไฟล์ .less ฉันได้รับข้อผิดพลาดNameError: .type is undefined

ไฟล์ .less จะไม่นำเข้าไฟล์. css เฉพาะไฟล์ที่ไม่มีไฟล์อื่น ๆ ... หรือไม่ หรือฉันอ้างถึงมันผิด ... ?!

css import less

— นายจอนนี่วู้ด
แหล่งที่มา

5

น้อยลงกลับไปที่ CSS ดังนั้นคุณควรจะสามารถเปลี่ยนชื่อ style.css เป็น style.less แล้วนำเข้าตามปกติ ... เว้นแต่หลักสูตรการเปลี่ยนชื่อ style.css ไม่ใช่ตัวเลือก

— jackwanders

3

ใช่น่าเสียดายที่การเปลี่ยนชื่อไฟล์. css เป็นไปไม่ได้จริงๆ

— นายจอนนี่วู้ด

1

มีปัญหาเดียวกัน โปรดสนับสนุนปัญหาgithub.com/cloudhead/less.js/issues/303

— Yaroslav

5

หากคุณไม่จำเป็นต้องอ้างอิง. css จากภายนอกและในเวลาเดียวกันคุณต้องไม่แก้ไข (เปลี่ยนชื่อ) ไฟล์. css คุณสามารถสร้างลิงก์สัญลักษณ์ที่มี.lessส่วนขยายได้ จากนั้นอ้างอิงเป็น.lessไฟล์ เนื่องจากเป็นลิงก์สัญลักษณ์จึงช่วยลดภาระในการซิงโครไนซ์เมื่อการเปลี่ยนแปลง. css ของคุณส่งผลกระทบต่อไฟล์. ข้อเสียคือคุณควรคอมไพล์ไฟล์ css ใหม่อีกครั้งหลังจากการเปลี่ยนแปลงที่ตามมา สำหรับข้อมูลเกี่ยวกับการสร้างลิงก์สัญลักษณ์ใน Windows ให้พิมพ์MKLINK /?ในหน้าต่างคำสั่ง

— Ivaylo Slavov

@jackwanders ไม่จำเป็นต้องเปลี่ยนชื่อเนื่องจาก LESS กลับสู่ CSS คุณสามารถนำเข้า.cssไฟล์โดยใช้แบบอินไลน์(less)สั่งและใช้ประโยชน์จากความจริงที่ว่า.cssไวยากรณ์ที่ถูกต้อง.lessไวยากรณ์

— ไออาร์เอ

316

คุณสามารถบังคับให้ตีความไฟล์เป็นชนิดเฉพาะได้โดยระบุตัวเลือกเช่น:

@import (css) "lib";

จะส่งออก

@import "lib";

และ

@import (less) "lib.css";

จะนำเข้าlib.cssไฟล์และจัดการกับไฟล์ให้น้อยลง หากคุณระบุไฟล์น้อยลงและไม่มีส่วนขยายจะไม่มีการเพิ่ม

— Fractalf
แหล่งที่มา

1

นี่คือคำตอบที่ถูกต้อง อันที่สามจะนำเข้า + รวบรวมรหัส CSS เป็นรหัสที่น้อยลงและจะไม่ปล่อยให้คำสั่งเหมือนเดิม

— CMCDragonkai

1

ฉันคิดว่า @import (รวม) ควรใช้ "lib.css" ฉันไม่ชอบความหมายของการโกหกกับคอมไพเลอร์ แน่นอนเมื่อคุณรู้ว่าไม่มีรหัสน้อยในไฟล์

16

สิ่งนี้จะสร้างคำขอ http เพิ่มเติมสำหรับ foo.css ดังนั้น(inline)คำสั่ง (ดูstackoverflow.com/a/22594082/160968 ) จึงเป็นที่ต้องการมากกว่าตอนนี้

— Urs

1

(inline)จะไม่ทำงานเพราะจะไม่แปลงการอ้างอิงภายนอกเป็นแบบอักษรหรือ@importไฟล์ edss อื่น ๆ คุณเพิ่งจบด้วยไฟล์ css ขนาดใหญ่ที่ทำให้คำขอ HTTP 404 มากมาย ....

— user3338098

ย้อนกลับการแก้ไขล่าสุดเนื่องจากมันไม่ถูกต้องและไม่ตอบคำถาม

— เจ็ดขั้นตอนสูงสุด

246

หากคุณต้องการ CSS ของคุณจะถูกคัดลอกลงในการส่งออกได้โดยไม่ต้องมีการประมวลผล, คุณสามารถใช้คำสั่ง(inline) เช่น,

@import (inline) '../timepicker/jquery.ui.timepicker.css';

— mpen
แหล่งที่มา

7

สมบูรณ์ วิธีนี้ใช้งานได้ดีเมื่อคุณต้องการเชื่อมไฟล์ CSS บางไฟล์ (เช่นใน IE7.less) แต่ไม่จำเป็นต้องประมวลผลไฟล์เหล่านั้น (เช่น bootstrap-ie7 ใช้นิพจน์ซึ่ง LESS จัดการไม่ดี)

— Joe

4

มีประโยชน์มาก @import (css) "styles.css";ไม่ได้ผลสำหรับฉัน

— ivkremer

10

พวกเขาทั้งสองตอบสนองกรณีการใช้ที่แตกต่างกัน ด้วย(css)การ@importสั่งจะยังคงเป็นตัวและเป็นผล CSS ไฟล์จะถูกโหลดโดยเบราว์เซอร์ที่รันไทม์ที่; ด้วย(inline)เนื้อหาของไฟล์ CSS จะถูกนำเข้าสู่สไตล์ชีทที่คอมไพล์แล้วซึ่งเป็นสิ่งที่คุณต้องการหากไฟล์นั้นอยู่นอกเว็บรูทของคุณ โปรดทราบว่าการทำงานเริ่มต้นเมื่อ@importไอเอ็นจี.cssไฟล์เป็นเช่นเดียวกับ(css)ธง - อ่านเอกสารสำหรับข้อมูลเพิ่มเติม :)

— ล็ก

ดังนั้นสิ่งนี้จะไม่ทำงานหากไฟล์ css ของคุณมี @importคำสั่งตามที่จะต้องมี

— user3338098

'อินไลน์' หมายความว่าการนำเข้าทั้งหมดจะถูกแทรกเข้าด้วยหรือไม่ มีวิธีในการทำซ้ำแบบอินไลน์หรือไม่?

— ไฟถนน

29

ฉันต้องใช้สิ่งต่อไปนี้กับรุ่น 1.7.4

@import (less) "foo.css"

ฉันรู้ว่าคำตอบที่ยอมรับคือ@import (css) "foo.css"แต่มันไม่ทำงาน หากคุณต้องการที่จะใช้คลาส css ของคุณในไฟล์ที่น้อยลงใหม่คุณต้องใช้(less)และไม่(css)ใช้

ตรวจสอบเอกสาร

— Gudradain
แหล่งที่มา

2

คำตอบที่ยอมรับมีตัวเลือกที่ถูกต้องในขั้นต้น (ใช่(less)เป็นตัวเลือกเดียวหากคุณต้องการใช้รูปแบบของไฟล์ css ซ้ำ) แต่ด้วยเหตุผลบางประการ @Fractalf จะลบส่วนที่ถูกต้องด้วยการแก้ไขล่าสุดของเขา

— เจ็ดขั้นตอนสูงสุด

1

คุณสามารถรวม "การอ้างอิง" และ "น้อยลง":@import (less, reference) "foo.css"

— Skarllot

28

เปลี่ยนนามสกุลของไฟล์ของไฟล์ CSS .lessของคุณเพื่อ คุณไม่จำเป็นต้องเขียนให้น้อยลง CSS ทั้งหมดนั้นมีค่าน้อย (ยกเว้นสิ่ง MS ที่คุณต้องหลบหนี แต่นั่นเป็นปัญหาอื่น)

ต่อคำตอบของ Fractalfนี้ได้รับการแก้ไขใน v1.4.0

— Mathletics
แหล่งที่มา

4

ในทางเทคนิคแล้วนั่นไม่ใช่การนำเข้าไฟล์ CSS

— nilskp

@Nilskp คุณถูกต้อง; แต่ถ้าคุณต้องการใช้คลาสในไฟล์อื่นคุณต้องใช้ไฟล์ LESS ไม่ใช่ CSS

— คณิตศาสตร์

1

@nilskp คุณกำลังบอกว่าการเปลี่ยนแปลงส่วนขยายนั้นมากเกินไปที่จะถามเพื่อให้มีการแยกวิเคราะห์ไฟล์เป็น LESS หรือไม่?

— คณิตศาสตร์

23

ใช่แน่นอนมันคือ ลองคิดนอกโครงการบ้านเล็ก ๆ ที่คุณเป็นเจ้าของไฟล์ทั้งหมด คิดถึงโครงการที่ใหญ่และมีหลายคนซึ่งไม่ใช่ทุกคนที่ใช้ LESS มีหลายกรณีที่มีการใช้งานหลายกรณีที่การเปลี่ยนชื่อไฟล์ไม่สามารถทำได้

— nilskp

1

คุณควรสนใจว่า css ของคุณมีอะไรบ้าง: calc (100% - 45px); และคุณต้องการมันในเบราว์เซอร์ หากประมวลผลไฟล์น้อยลงผลลัพธ์สุดท้ายจะเป็น: calc (55%); เพราะแคลอรีน้อยลง

— Christof Aenderl

8

จากเว็บไซต์ LESS :

หากคุณต้องการนำเข้าไฟล์ CSS และไม่ต้องการให้ LESS ประมวลผลเพียงใช้ส่วนขยาย. css:

@import "lib.css"; คำสั่งจะถูกทิ้งไว้ตามที่เป็นและสิ้นสุดในเอาต์พุต CSS

jitbit ชี้ให้เห็นในความคิดเห็นด้านล่างนี่เป็นประโยชน์สำหรับวัตถุประสงค์ในการพัฒนาเท่านั้นเนื่องจากคุณไม่ต้องการ@importใช้แบนด์วิดท์ที่มีค่าที่ไม่จำเป็น

— webdevkit
แหล่งที่มา

14

นี่จะไม่นำเข้าไฟล์มันจะออกจาก @import directive เหมือนเดิม มันจะยังคงใช้งานได้ แต่คุณควรหลีกเลี่ยง css-import - ดูที่developers.google.com/speed/docs/best-practices/?hl=th

— Alex

5

ขอบคุณสำหรับข้อมูล @jitbit โดยส่วนตัวแล้วฉันพบว่ามันใช้งานง่ายขึ้น@importในระหว่างการพัฒนาจากนั้นรวมและย่อขนาดไฟล์ที่นำเข้ามาเป็นสไตล์ชีทเดียวเมื่อย้ายไปผลิต

— webdevkit

1

หากคุณอ่านคำถามอย่างระมัดระวัง (ไม่ใช่เฉพาะบรรทัดส่วนหัว) คุณจะเห็นว่า OP ต้องการอ้างอิงคลาสในไฟล์ css เป็นมิกซ์อินซึ่งเป็นไปไม่ได้ถ้ามันแยกวิเคราะห์เป็นการนำเข้า css แบบง่าย

— ความกลัว

7

ลองสิ่งนี้:

@import "lib.css";

จากเอกสารอย่างเป็นทางการ:

คุณสามารถนำเข้าทั้งไฟล์ css และไฟล์น้อยลง ประมวลผลคำสั่งที่นำเข้าไฟล์น้อยกว่าคำสั่งนำเข้าไฟล์ css จะถูกเก็บไว้เหมือนเดิม หากคุณต้องการนำเข้าไฟล์ CSS และไม่ต้องการให้ LESS ประมวลผลเพียงใช้ส่วนขยาย. css:

ที่มา: http://lesscss.org/

— Dr.Kameleon
แหล่งที่มา

2

หากคุณอ่านคำถามอย่างระมัดระวัง (ไม่ใช่เฉพาะบรรทัดส่วนหัว) คุณจะเห็นว่า OP ต้องการอ้างอิงคลาสในไฟล์ css เป็นมิกซ์อินซึ่งเป็นไปไม่ได้ถ้ามันแยกวิเคราะห์เป็นการนำเข้า css แบบง่าย

— ความกลัว

6

หากคุณต้องการนำเข้าไฟล์ CSS เป็นข้อมูลอ้างอิง (เช่นใช้คลาสใน Mixins) แต่ไม่รวมไฟล์ CSS ทั้งหมดในผลลัพธ์ที่คุณสามารถใช้ได้@import (less,reference) "reference.css"; :

my.less

 @import (less,reference) "reference.css";
 .my-class{
     background-color:black;
     .reference-class;
     color:blue;
 }

reference.css

.reference-class{
    border: 1px solid red;
}

* ผลลัพธ์ (my.css) ด้วยlessc my.less out/my.css*

.my-class {
  background-color: black;
  border: 1px solid red;
  color: blue;
}

ฉันกำลังใช้ lessc 2.5.3

— hinneLinks
แหล่งที่มา

นี่คือสิ่งที่ฉันต้องการ &:extend(.reference-class all);แต่ผมต้องใช้ขยายไวยากรณ์: การอ้างอิงคลาสโดยตรงทำให้เกิดข้อผิดพลาดในการคอมไพล์

— Jens Neubauer

4

หากคุณต้องการอิมพอร์ตไฟล์ css ที่ควรถูกใช้เป็นน้อยกว่าให้ใช้บรรทัดนี้:

.ie {
  @import (less) 'ie.css';
}

— ชาร์ลส์
แหล่งที่มา

3

เนื่องจาก 1.5.0 คุณสามารถใช้คำหลัก 'อินไลน์'

ตัวอย่าง: @import (inline) "not-less-compatible.css";

คุณจะใช้สิ่งนี้เมื่อไฟล์ CSS อาจไม่สามารถทำงานร่วมกันได้น้อย นี่เป็นเพราะถึงแม้ว่า Less จะรองรับ CSS มาตรฐานที่เป็นที่รู้จักมากที่สุด แต่ก็ไม่รองรับความคิดเห็นในบางที่และไม่รองรับ CSS hacks ที่รู้จักทั้งหมดโดยไม่ต้องแก้ไข CSS ดังนั้นคุณสามารถใช้สิ่งนี้เพื่อรวมไฟล์ในเอาท์พุทเพื่อให้ CSS ทั้งหมดจะอยู่ในไฟล์เดียว

(ที่มา: http://lesscss.org/features/#import-directives-feature )

— ปีเตอร์ ม.ค.
แหล่งที่มา