Trong SASS, có thể nhập tệp từ thư mục khác không? Ví dụ: nếu tôi có cấu trúc như thế này:

- root_directory
    - sub_directory_a
        - _common.scss
        - template.scss
    - sub_directory_b
        - more_styles.scss

template.scss có thể nhập _common.scss bằng cách sử dụng @import "common"nhưng more_styles.scss có thể nhập _common.scss không? Tôi đã thử một số cách khác nhau bao gồm @import "../sub_directory_a/common"và @import "../sub_directory_a/_common.scss"nhưng dường như không có gì hoạt động.

Có vẻ như một số thay đổi đối với SASS đã thực hiện được những gì bạn đã thử làm ban đầu:

@import "../subdir/common";

Chúng tôi thậm chí đã nhận được điều này để làm việc cho một số thư mục hoàn toàn không liên quan nằm trong c:\projects\sass:

@import "../../../../../../../../../../projects/sass/common";

Chỉ cần thêm đủ ../để chắc chắn rằng bạn sẽ kết thúc ở gốc ổ đĩa và bạn đã sẵn sàng.

Tất nhiên, giải pháp này không phải là tốt, nhưng tôi không thể nhận nhập từ một thư mục hoàn toàn khác để hoạt động, không sử dụng I c:\projects\sasshoặc đặt biến môi trường SASS_PATH(từ tham chiếu:: load_paths ) thành cùng một giá trị.

Bạn có thể sử dụng công -Itắc dòng lệnh hoặc :load_pathstùy chọn từ mã Ruby để thêm sub_directory_avào đường dẫn tải của Sass. Vì vậy, nếu bạn đang chạy Sass from root_directory, hãy làm như sau:

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

Sau đó, bạn có thể chỉ cần sử dụng @import "common"trong more_styles.scss.

Tôi có thể sử dụng webpack với sass-loader ~để tham chiếu đến đường dẫn gốc của dự án. Ví dụ: giả sử cấu trúc thư mục OP và bạn đang ở trong một tệp bên trong sub_directory_b:

@import "~sub_directory_a/_common";

Tài liệu: https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules

Nhập .scsstệp có mục nhập lồng nhau với vị trí tương đối khác sẽ không hoạt động. câu trả lời được đề xuất hàng đầu (sử dụng nhiều ../) chỉ là một bản hack bẩn sẽ hoạt động miễn là bạn đã thêm đủ ../để truy cập vào gốc của hệ điều hành triển khai dự án của bạn.

1. Thêm đường dẫn SCSS đích làm mục tiêu tìm kiếm cho trình biên dịch SCSS. Điều này có thể đạt được bằng cách thêm thư mục bảng định kiểu vào tệp cấu hình scss, đây là chức năng của khung mà bạn đang sử dụng,

sử dụng :load_pathstại config.rdcho các khuôn khổ dựa trên la bàn (Ví dụ: đường ray)

sử dụng mã sau tại scss-config.jsonchofourseven/meteor-scss

{
  "includePaths": [
    "{}/node_modules/ionicons/dist/scss/"
  ]
}

2. Sử dụng đường dẫn tuyệt đối (so với đường dẫn tương đối).

Ví dụ, với fourseven/meteor-scss, bạn có thể sử dụng {}để làm nổi bật cấp cao nhất của dự án của mình theo examplI sau

@import "{}/node_modules/module-name/stylesheet";

Câu trả lời đã chọn không đưa ra giải pháp khả thi.

Hoạt động của OP dường như không thường xuyên. Một tệp chia sẻ / chung thường nằm trong partialsmột thư mục soạn sẵn chuẩn. Sau đó, bạn nên thêm partialsthư mục vào đường dẫn nhập cấu hình của mình để giải quyết các phần tử ở bất kỳ đâu trong mã của bạn.

Khi tôi gặp sự cố này lần đầu tiên, tôi nhận thấy SASS có thể cung cấp cho bạn một biến toàn cục tương tự như Node __dirname, giữ một đường dẫn tuyệt đối đến thư mục làm việc hiện tại ( cwd). Thật không may, nó không có và lý do tại sao là vì không thể nội suy trên một @importchỉ thị, do đó bạn không thể thực hiện một đường dẫn nhập động.

Theo SASS docs .

Bạn cần thiết lập :load_pathscấu hình Sass của mình. Vì OP sử dụng La bàn, tôi sẽ làm theo điều đó theo tài liệu ở đây .

Bạn có thể sử dụng giải pháp CLI như đã định, nhưng tại sao? thuận tiện hơn nhiều khi thêm nó vào config.rb. Sẽ rất hợp lý khi sử dụng CLI để ghi đè config.rb(Ví dụ: các kịch bản xây dựng khác nhau).

Vì vậy, giả sử bạn config.rbđang ở dưới gốc dự án, chỉ cần thêm dòng sau: add_import_path 'sub_directory_a'

Và bây giờ @import 'common';sẽ hoạt động tốt ở bất cứ đâu.

Trong khi điều này trả lời OP, có nhiều hơn nữa.

ruột thừa

Bạn có thể gặp phải trường hợp bạn muốn nhập tệp CSS theo cách nhúng, tức là không phải thông qua @importchỉ thị vani mà CSS cung cấp sẵn, mà là sự hợp nhất thực tế của nội dung tệp CSS với SASS của bạn. Có một câu hỏi khác , được trả lời một cách không thuyết phục (giải pháp không hoạt động trên nhiều môi trường). Giải pháp sau đó là sử dụng phần mở rộng SASS này .

Sau khi cài đặt, hãy thêm dòng sau vào cấu hình của bạn: require 'sass-css-importer'và sau đó, ở đâu đó trong mã của bạn:@import 'CSS:myCssFile';

Lưu ý rằng phần mở rộng phải được bỏ qua để điều này hoạt động.

Tuy nhiên, chúng tôi sẽ gặp phải vấn đề tương tự khi cố gắng nhập tệp CSS từ một đường dẫn không mặc định và add_import_pathkhông tôn trọng tệp CSS. Vì vậy, để giải quyết điều đó, bạn cần thêm một dòng khác trong cấu hình của mình, tự nhiên tương tự:

add_import_path Sass::CssImporter::Importer.new('sub_directory_a')

Bây giờ mọi thứ sẽ hoạt động tốt.

Tái bút, tôi nhận thấy sass-css-importertài liệu chỉ ra rằng một CSS:tiền tố là bắt buộc ngoài việc bỏ qua .cssphần mở rộng. Tôi phát hiện ra nó hoạt động bất chấp. Ai đó đã bắt đầu một vấn đề mà cho đến nay vẫn chưa được giải đáp.

Gulp sẽ thực hiện công việc xem các tệp sass của bạn và cũng có thể thêm các đường dẫn của tệp khác bằng includePaths. thí dụ:

gulp.task('sass', function() {
  return gulp.src('scss/app.scss')
    .pipe($.sass({
      includePaths: sassPaths
    })
    .pipe(gulp.dest('css'));
});

node-sass(trình bao bọc SASS chính thức cho node.js) cung cấp tùy chọn dòng lệnh --include-pathđể trợ giúp các yêu cầu như vậy.

Thí dụ:

Trong package.json:

"scripts": {
    "build-css": "node-sass src/ -o src/ --include-path src/",
}

Bây giờ, nếu bạn có một tệp src/styles/common.scsstrong dự án của mình, bạn có thể nhập tệp đó @import 'styles/common';vào bất kỳ đâu trong dự án của mình.

Tham khảo https://github.com/sass/node-sass#usage-1 để biết thêm chi tiết.

Để xác định tệp để nhập, bạn có thể sử dụng tất cả các định nghĩa chung về thư mục. Bạn chỉ cần lưu ý rằng nó liên quan đến tệp bạn đang định nghĩa nó. Thông tin thêm về tùy chọn nhập với các ví dụ bạn có thể kiểm tra tại đây .

Nếu sử dụng Trình biên dịch Web trong Visual Studio, bạn có thể thêm đường dẫn đến includePathtrong compilerconfig.json.defaults. Sau đó, không cần một số ../vì trình biên dịch sẽ sử dụng includePath làm vị trí để tìm kiếm nhập.

Ví dụ:

"includePath": "node_modules/foundation-sites/scss",

Đây là một nửa câu trả lời.

Kiểm tra La bàn , với nó, bạn có thể đặt _common.scssbên trong một partialsthư mục, sau đó nhập nó với @import common, nhưng nó hoạt động trong mọi tệp.

Tôi gặp phải vấn đề tương tự. Từ giải pháp của tôi, tôi đã đi vào điều này. Đây là mã của bạn:

- root_directory
    - sub_directory_a
        - _common.scss
        - template.scss
    - sub_directory_b
        - more_styles.scss

Theo như tôi biết nếu bạn muốn nhập một scss này sang một scss khác thì nó phải là một phần. Khi bạn đang nhập từ tên thư mục khác của bạn more_styles.scssđến _more_styles.scss. Sau đó nhập nó vào template.scss@import như thế này của bạn ../sub_directory_b/_more_styles.scss. Nó đã làm việc cho tôi. Nhưng như bạn đề cập ../sub_directory_a/_common.scsskhông hoạt động. Đó là cùng một thư mục của template.scss. Đó là lý do tại sao nó sẽ không hoạt động.

Xem xét việc sử dụng tham số includePaths ...

"Trình biên dịch SASS sử dụng từng đường dẫn trong loadPaths khi phân giải SASS @imports."

https://stackoverflow.com/a/33588202/384884

Cách tốt nhất là sử dụng trình tải sass của người dùng. Nó có sẵn dưới dạng gói npm. Nó giải quyết tất cả các vấn đề liên quan đến đường dẫn và làm cho nó trở nên siêu dễ dàng.

Tôi cũng gặp vấn đề tương tự và tôi đã tìm thấy giải pháp bằng cách thêm đường dẫn vào tệp như:

@import "C: / xampp / htdocs / Scss_addons / Bootstrap / bootstrap";

@import "C: / xampp / htdocs / Scss_addons / La bàn / la bàn";