วิธีดูไฟล์ sass

ฉันเพิ่งตัดสินใจเริ่มเรียนรู้ sass แต่ก็ยังประสบปัญหาเล็กน้อยในการใช้งาน sass บนพีซีของฉัน ฉันดาวน์โหลดและติดตั้งแล้วตามภาพที่แสดง:

ป้อนคำอธิบายรูปภาพที่นี่

ป้อนคำอธิบายรูปภาพที่นี่

โฟลเดอร์ที่ฉันมีโปรเจ็กต์อยู่ในโฟลเดอร์ htdocs ในโฟลเดอร์ xampp ฉันพิมพ์ C:\Users\Thulani>sass --watch C:\xampp\htdocs\ruby\lib\sass\style.scss:style.css บนบรรทัดคำสั่ง แต่มันบอกว่า sass กำลังเฝ้าดูการเปลี่ยนแปลงเท่านั้น

ป้อนคำอธิบายรูปภาพที่นี่

ฉันจะทำการเปลี่ยนแปลงใน style.scss ของฉันและดูการเปลี่ยนแปลงเหล่านั้นได้อย่างไร

ที่นี่ html ของฉัน:

<html>
<head>
   <title> Import example of sass</title>
   <link rel="stylesheet" type="text/css" href="/thstyle.css"/>
</head>
<body>
   <h1>Simple Example</h1>
   <h3>Welcome to TutorialsPoint</h3>
</body>
</html>

กรุณาช่วย


ruby-on-rails css sass
person user agent    schedule 11.10.2016    source แหล่งที่มา
comment
คุณได้ลองทำการเปลี่ยนแปลง style.scss ของคุณแล้วหรือยัง? หากคุณกำลังรันงาน --watch การเปลี่ยนแปลงใดๆ ที่ทำกับอินพุตจะถูกรวบรวมและส่งออกไปยังปลายทางที่คุณเลือก sass-lang.com/documentation/file.SASS_REFERENCE.html#using_sass   -  person imjared    schedule 11.10.2016
comment
ใช่ ฉันพยายามเปลี่ยนแปลงบางอย่างใน style.scss แต่ไม่มีอะไรเกิดขึ้น   -  person user agent    schedule 11.10.2016

คำตอบ (2)


arrow_upward
1
arrow_downward

ใช้คำสั่งนี้ในโฟลเดอร์ที่คุณต้องการรับชม

sass -w src/assets

หากคุณไม่ต้องการให้ไฟล์แผนที่ใช้สิ่งนี้

sass -w src/assets --sourcemap=none
person Mertcan Diken    schedule 10.02.2017

arrow_upward
0
arrow_downward

จากสิ่งที่คุณให้มา ฉันบอกได้แค่ว่าบางทีคุณอาจทำผิดพลาดที่ไม่ได้เรียกคลาสหรือรหัสใดๆ จากไฟล์ CSS ของคุณ คงจะดีไม่น้อยหากคุณสามารถอัปโหลดสิ่งนั้นได้เช่นกัน แต่ฉันคิดว่าคุณพยายามจัดสไตล์เฉพาะองค์ประกอบ <h1> และ <h3> เนื่องจากคุณยังใหม่ ฉันจะเขียนโค้ดทดสอบง่ายๆ ที่ควรรันให้กับคุณ

นี่คือไฟล์ HTML ของฉัน:

  <!DOCTYPE html>
  <html lang="en-GB">
  <head>
    <meta charset="utf-8">
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="initial-scale=1">

    <title>Test</title>

    <link type="text/css" rel="stylesheet" href="/thstyle.css"/>
 </head>
 <body>
    <div id="red">
       <h1>I am red !</h1>
     </div>
     <div id="blue">
       <h2>I am blue</h2>
     </div>
   </body>

ไฟล์ SCSS ของฉัน:

    //@import "Filename";
// use import if you want to link two or more style sheets together (makes one big css file)

/* Colours used */
$red: red;
$blue: blue;

html, body{
    width: 100%;
    overflow-x:hidden;
    margin: 0;
    padding: 0;
}
body {
    background-color: white;
    font-family: sans-serif;
}
#red {
    color: $red;
}
#blue {
    color: $blue;
}

ผ่านการทดสอบการแปลง SCSS เป็น CSS

person Mobeen    schedule 10.02.2017