Làm thế nào để nhập tệp scss trong la bàn chỉ khi nó tồn tại?

Question

Tôi cần có tệp scss đặc biệt khác với mọi cài đặt của dự án, vì vậy tôi không muốn đưa nó vào kho lưu trữ git. Nhưng mọi thứ sẽ hoạt động ngay cả khi tệp này không tồn tại.

Có cách nào để @import tệp scss chỉ khi nó tồn tại, bỏ qua lỗi không tìm thấy tệp không?

Answer 1

Bạn cần phải sử dụng tùy chọn "nhập đường dẫn" để thực hiện việc này, trong đó đường dẫn bạn nhập chứa tệp dự phòng bạn muốn nhập (trong trường hợp của chúng tôi, chúng tôi muốn tệp trống).

Lựa chọn 1: Vanilla Sass

cấu trúc file

├── fallback 
    ├── _example.scss // <-- our blank file 
├── _example.scss // <-- the file for the user to customize (optional) 
├── style.scss 

Trong style.scss:

@import "example"; 
/* the rest of our styles */ 

Khi bạn chạy lệnh sass của bạn, bạn sẽ viết nó như này:

sass --watch ./css:./sass --load-path ./sass/fallback 

Lưu ý rằng thư mục dự phòng không cần phải nằm trong thư mục sass của bạn, nó nằm ở bất cứ đâu trên hệ thống tập tin bạn thích.

Xem thêm: How does SCSS locate partials?

Phương án 2: Compass mở rộng

Bạn có thể thấy rằng việc tạo ra một phần mở rộng Compass là một chút thuận tiện hơn nếu bạn đang sử dụng kỹ thuật này trong nhiều dự án. Nó sẽ tự động thiết lập đường dẫn tải cho bạn. Bạn có thể tìm hiểu thêm về cách tạo tiện ích mở rộng tại đây: http://compass-style.org/help/tutorials/extensions/

Answer 2

Có thể với sass-globbing và quy ước đặt tên cho các tệp tùy chọn theo một thứ tự tải cụ thể.

Hãy xem xét những cây sau đây:

stackoverflow-14975341/ 
├── .gitignore 
├── config.rb 
├── css/ 
│   └── screen.css 
└── sass/ 
    ├── optionals/ 
    │   ├── .gitkeep 
    │   ├── _01_style.scss 
    │   └── _03_style.scss 
    └── screen.scss 

với những tập tin này:

# config.rb 
require 'sass-globbing' 

sass_dir = 'sass' 
css_dir = 'css' 
relative_assets = true 

và

// sass/screen.scss 
@import "optionals/*"; 

và

// sass/optionals/_01_style.scss 
.optional1 { 
    background-color: red; 
} 

.210

và

// sass/optionals/_03_style.scss 
.optional3 { 
    background-color: green; 
} 

và, trong .gitignore:

sass/optional/* 

Cuối cùng, để giữ cho các thư mục optional, tạo một tập tin rỗng tên .gitkeep (tên tập tin là không quan trọng).

Khi bạn biên dịch biểu định kiểu, Compass sẽ tạo ra screen.css ngay cả khi tệp thiếu _02_style.scss bị thiếu.

// css/screen.css 
/* line 1, ../sass/optionals/_01_style.scss */ 
.optional1 { 
    background-color: red; 
} 

/* line 1, ../sass/optionals/_03_style.scss */ 
.optional3 { 
    background-color: green; 
} 

Chắc chắn có thể cải thiện hệ thống dựa trên các đường dẫn bổ sung nhập.