Hướng dẫn import file scss - nhập tệp tin

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học SCSS
• SCSS @import

SCSS @import

• SCSS cung cấp một quy tắc @import thông qua quá trình biên dịch, không như @import của CSS yêu cầu request HTTP từ trình duyệt.
• Việc import SCSS sẽ đồng thời kết hợp các công thức nhận được để biên dịch thành file CSS.
• Việc import SCSS tuân thủ một số quy tắc:
  • File import sẽ có dạng dấu gạch dưới ở trước tên file _name.scss.
  • Nội dung import chỉ chứa name mà không có dấu gạch

    @import 'base';
    .list {
        color: red;
        li {
            font-size: 14px;
        }
    }

    0 và định dạng file

    @import 'base';
    .list {
        color: red;
        li {
            font-size: 14px;
        }
    }

    1.

Ví dụ về SCSS @import

.box {
    padding: 20px;
    line-height: 0;
}

@import 'base';
.list {
    color: red;
    li {
        font-size: 14px;
    }
}

.box {
    padding: 20px;
    line-height: 0;
}
.list {
    color: red;
}
.list li {
    font-size: 14px;
}

• Nhìn vào kết quả CSS, ta thấy nội dung file

  @import 'base';
  .list {
      color: red;
      li {
          font-size: 14px;
      }
  }

  2 đã được import vào

  @import 'base';
  .list {
      color: red;
      li {
          font-size: 14px;
      }
  }

  3.

SCSS @import nhiều file

p, div {
    padding: 0;
    margin: 0;
}

.box {
    padding: 20px;
    line-height: 0;
}

@import 'reset','base';
.list {
    color: red;
    li {
        font-size: 14px;
    }
}

p, div {
    padding: 0;
    margin: 0;
}
.box {
    padding: 20px;
    line-height: 0;
}
.list {
    color: red;
}
.list li {
    font-size: 14px;
}

• Nhìn vào kết quả CSS, ta thấy nội dung file

  @import 'base';
  .list {
      color: red;
      li {
          font-size: 14px;
      }
  }

  2 đã được import vào

  @import 'base';
  .list {
      color: red;
      li {
          font-size: 14px;
      }
  }

  3.
• SCSS @import nhiều file

hieu nguyen

Yêu cầu thg 1 4, 2020 4:49 SA

Yêu cầu thg 1 4, 2020 4:49 SA• 266 0 1• 266 0 1

• 266 0 1 0 1

0

SCSSCSSWordpress

clip

• 266 0 1 0 1

SCSSCSSWordpress

clip @hieuhumg

chào các bác, e có folder file scss ở dưới. Bây giờ map thế nào để tất cả vào file main.css ở trên. Cảm ơn các bác giúp đỡ! 0 26 1

Thêm một bình luận

hieu nguyen

Yêu cầu thg 1 4, 2020 4:49 SA

Yêu cầu thg 1 4, 2020 4:49 SA• 266 0 1

Yêu cầu thg 1 4, 2020 4:49 SA• 266 0 1

+4

1. 266 0 1

@import "mystyle.css";
@import url("mystyle.css");

1. SCSSCSSWordpress
   Bạn có thể tham khảo dùng node-sass. Có vẻ nó sẽ convert ở bước trung gian luôn, nên mình có thể dùng cú pháp @import cho scss.
   Các bước hướng dẫn cài đặt, sử dụng bạn xem ở 2 link sau.
   https://create-react-app.dev/docs/adding-a-sass-stylesheet/ https://stackoverflow.com/questions/31448114/how-to-compile-or-convert-sass-scss-to-css-with-node-sass-no-ruby
   Hi vọng là nó giải quyết được vấn đề của bạn!

Nghiem Xuan Hien @nghiem.xuan.hien@nghiem.xuan.hien

943 39 0 3 39 0 3

thg 1 5, 2020 3:27 CH

Cảm ơn bác, mình dùng koala để compine nhưng khả năng thiếu file gì đó nên nó báo đường dẫn sai, mặc dù đường dẫn đúng

Thêm một bình luận