Nhập tệp CSS thường xuyên trong tệp SCSS?

Có cách nào để nhập tệp CSS thông thường bằng @importlệnh của Sass không? Mặc dù tôi không sử dụng tất cả cú pháp SCSS từ sass, tôi vẫn thích tính năng kết hợp / nén của nó và muốn có thể sử dụng nó mà không cần đổi tên tất cả các tệp của mình thành * .scss

Có vẻ như điều này chưa được thực hiện, tính đến thời điểm viết bài này:

https://github.com/sass/sass/issues/193

Đối với libsass (triển khai C / C ++), nhập hoạt động *.csstheo cách tương tự như đối với *.scsscác tệp - chỉ cần bỏ qua phần mở rộng:

@import "path/to/file";

Điều này sẽ nhập khẩu path/to/file.css.

Xem câu trả lời này để biết thêm chi tiết.

Xem câu trả lời này để thực hiện Ruby (sass gem)

Sau khi có cùng một vấn đề, tôi đã nhầm lẫn với tất cả các câu trả lời ở đây và các ý kiến ​​về kho lưu trữ của sass trong github.

Tôi chỉ muốn chỉ ra rằng vào tháng 12 năm 2014, vấn đề này đã được giải quyết. Bây giờ có thể nhập csstệp trực tiếp vào tệp sass của bạn. Các PR sau trong github giải quyết vấn đề.

Cú pháp giống như bây giờ - @import "your/path/to/the/file", không có phần mở rộng sau tên tệp. Điều này sẽ nhập tệp của bạn trực tiếp. Nếu bạn nối *.cssvào cuối, nó sẽ chuyển thành cssquy tắc @import url(...).

Trong trường hợp bạn đang sử dụng một số gói mô-đun mới "lạ mắt" như webpack , có lẽ bạn sẽ cần sử dụng sử dụng ~ở đầu đường dẫn. Vì vậy, nếu bạn muốn nhập đường dẫn sau, node_modules/bootstrap/src/core.scssbạn sẽ viết một cái gì đó như thế
@import "~bootstrap/src/core".

LƯU Ý:
Có vẻ như điều này không làm việc cho tất cả mọi người. Nếu thông dịch viên của bạn dựa trên libsassnó sẽ hoạt động tốt (kiểm tra cái này ). Tôi đã thử nghiệm bằng cách sử dụng @importnút-sass và nó hoạt động tốt. Thật không may, điều này hoạt động và không hoạt động trên một số trường hợp ruby.

Bạn phải thêm một dấu gạch dưới vào tệp css để được bao gồm và chuyển phần mở rộng của nó thành scss (ví dụ _yourfile.scss:). Sau đó, bạn chỉ cần gọi nó theo cách này:

@import "yourfile";

Và nó sẽ bao gồm các nội dung của tệp, thay vì sử dụng lệnh @import tiêu chuẩn CSS.

Điều này đã được thực hiện và sáp nhập bắt đầu từ phiên bản 3.2( kéo # 754 sáp nhập vào ngày 02 tháng 1 năm 2015 cho libsass, vấn đề originaly được xác định ở đây: sass# 193 # 556 , libsass# 318 ).

Để cắt ngắn câu chuyện dài, cú pháp tiếp theo:

1. để nhập (bao gồm) tệp CSS thô

   cú pháp không có.css phần mở rộng ở cuối (kết quả là đọc thực tế một phần s[ac]ss|cssvà bao gồm cả nội tuyến của SCSS / SASS):

   @import "path/to/file";

2. để nhập tệp CSS theo cách truyền thống

   cú pháp đi theo cách truyền thống, với .cssphần mở rộng ở cuối (kết quả là @import url("path/to/file.css");trong CSS đã biên dịch của bạn):

   @import "path/to/file.css";

Và nó là rất tốt: cú pháp này là thanh lịch và laconic, cộng với tương thích ngược! Nó hoạt động xuất sắc với libsassvà node-sass.

__

Để tránh những suy đoán thêm trong các bình luận, hãy viết điều này một cách rõ ràng: Sass dựa trên Ruby vẫn có tính năng này chưa được thực hiện sau 7 năm thảo luận. Tại thời điểm viết câu trả lời này, người ta hứa rằng trong 4.0 sẽ có một cách đơn giản để thực hiện điều này, có thể là với sự giúp đỡ của . Có vẻ như sẽ sớm triển khai, thẻ "Đề xuất được chấp nhận" "đã được lên kế hoạch" đã được chỉ định cho vấn đề # 556 và tính năng mới .@use@use

Câu trả lời có thể được cập nhật, ngay khi có gì đó thay đổi .

Tin vui cho mọi người, Chris Eppstein đã tạo ra một plugin la bàn với chức năng nhập css nội tuyến:

https://github.com/chriseppstein/sass-css-importer

Bây giờ, nhập tệp CSS dễ dàng như:

@import "CSS:library/some_css_file"

Nếu bạn có một .csstệp mà bạn không muốn sửa đổi, thì cũng không thay đổi phần mở rộng của nó thành .scss( ví dụ: tệp này là từ một dự án rẽ nhánh mà bạn không duy trì ), bạn luôn có thể tạo một liên kết tượng trưng và sau đó nhập nó vào .scss.

Tạo một liên kết tượng trưng:

ln -s path/to/css/file.css path/to/sass/files/_file.scss

Nhập tệp symlink vào mục tiêu .scss:

@import "path/to/sass/files/file";

Tệp đầu ra mục tiêu của bạn .csssẽ giữ nội dung từ .scsstệp symlink đã nhập , không phải là quy tắc nhập CSS ( được đề cập bởi @yaz với số phiếu nhận xét cao nhất ). Và bạn không có các tệp trùng lặp với các tiện ích mở rộng khác nhau, điều đó có nghĩa là bất kỳ cập nhật nào được thực hiện bên trong .csstệp ban đầu ngay lập tức được nhập vào đầu ra mục tiêu của bạn.

Liên kết tượng trưng (cũng là liên kết tượng trưng hoặc liên kết mềm) là một loại tệp đặc biệt chứa tham chiếu đến một tệp khác ở dạng đường dẫn tuyệt đối hoặc tương đối và ảnh hưởng đến độ phân giải tên đường dẫn.
- http://en.wikipedia.org/wiki/Symbolic_link

Bạn có thể sử dụng bên thứ ba importerđể tùy chỉnh @importngữ nghĩa.

node-sass-import-once , hoạt động với node-sass (đối với Node.js) có thể nhập nội tuyến các tệp CSS.

Ví dụ về sử dụng trực tiếp:

var sass = require('node-sass');,
    importOnce = require('node-sass-import-once');

sass.render({
  file: "input.scss",
  importer: importOnce,
  importOnce: {
    css: true,
  }
});

Ví dụ cấu hình grunt-sass :

var importOnce = require("node-sass-import-once");
grunt.loadNpmTasks("grunt-sass");

grunt.initConfig({
  sass: {
    options: {
      sourceMap: true,
      importer: importOnce
    },
    dev: {
      files: {
        "dist/style.css": "scss/**/*.scss"
      }
    }
  });

Lưu ý rằng nút-sass-import-once hiện không thể nhập các phần Sass mà không có dấu gạch dưới hàng đầu rõ ràng. Ví dụ với tệp partials/_partial.scss:

• @import partials/_partial.scss thành công
• @import * partials/partial.scss thất bại

Nói chung, hãy lưu ý rằng một nhà nhập khẩu tùy chỉnh có thể thay đổi bất kỳ ngữ nghĩa nhập khẩu nào . Đọc tài liệu trước khi bạn bắt đầu sử dụng nó.

Nếu tôi đúng css tương thích với scss để bạn có thể thay đổi phần mở rộng của css thành scss và nó sẽ tiếp tục hoạt động. Khi bạn thay đổi tiện ích mở rộng, bạn có thể nhập nó và nó sẽ được bao gồm trong tệp.

Nếu bạn không làm điều đó, sass sẽ sử dụng css @import, thứ bạn không muốn.

Tôi đã tìm ra một cách thanh lịch, giống như Rails để làm điều đó. Đầu tiên, đổi tên .scsstệp của bạn thành .scss.erb, sau đó sử dụng cú pháp như thế này (ví dụ cho nội dung CSS gem_js-rails4 ):

@import "<%= asset_path("highlight_js/github") %>";

Tại sao bạn không thể lưu trữ tệp trực tiếp qua SCSS :

Thực hiện @importtrong SCSS hoạt động tốt cho các tệp CSS miễn là bạn sử dụng rõ ràng đường dẫn đầy đủ theo cách này hay cách khác. Trong chế độ phát triển, rails sphục vụ tài sản mà không cần biên dịch chúng, vì vậy một đường dẫn như thế này hoạt động ...

@import "highlight_js/github.css";

... bởi vì đường dẫn được lưu trữ theo nghĩa đen /assets/highlight_js/github.css. Nếu bạn nhấp chuột phải vào trang và "xem nguồn", sau đó nhấp vào liên kết cho biểu định kiểu với ở trên @import, bạn sẽ thấy một dòng trong đó trông giống như:

@import url(highlight_js/github.css);

Công cụ SCSS dịch "highlight_js/github.css"sang url(highlight_js/github.css). Điều này sẽ hoạt động một cách bơi lội cho đến khi bạn quyết định thử chạy nó trong sản xuất, nơi các tài sản được biên dịch trước có một hàm băm được chèn vào tên tệp. Tệp SCSS vẫn sẽ phân giải thành một tĩnh /assets/highlight_js/github.csskhông được biên dịch trước và không tồn tại trong sản xuất.

Giải pháp này hoạt động như thế nào:

Đầu tiên, bằng cách di chuyển .scsstệp đến .scss.erb, chúng tôi đã biến SCSS thành một khuôn mẫu cho Rails một cách hiệu quả. Bây giờ, bất cứ khi nào chúng tôi sử dụng <%= ... %>thẻ mẫu, bộ xử lý mẫu Rails sẽ thay thế các đoạn mã này bằng đầu ra của mã (giống như bất kỳ mẫu nào khác).

Nói rõ asset_path("highlight_js/github")trong .scss.erbtập tin có hai điều:

1. Kích hoạt rake assets:precompiletác vụ để biên dịch trước tệp CSS thích hợp.
2. Tạo một URL phản ánh thích hợp tài sản bất kể môi trường Rails.

Điều này cũng có nghĩa là công cụ SCSS thậm chí không phân tích tệp CSS; nó chỉ lưu trữ một liên kết đến nó! Vì vậy, không có bản vá khỉ khỉ hoặc cách giải quyết khác. Chúng tôi đang phục vụ một tài sản CSS thông qua SCSS như dự định và sử dụng URL để nói tài sản CSS như Rails dự định. Ngọt!

Cách giải quyết đơn giản:

Tất cả, hoặc gần như tất cả các tập tin css cũng có thể được hiểu như thể nó sẽ là scss. Nó cũng cho phép nhập chúng trong một khối. Đổi tên css thành scss và nhập nó như vậy.

Trong cấu hình thực tế của tôi, tôi làm như sau:

Đầu tiên tôi sao chép tệp .css thành tệp tạm thời, lần này có phần mở rộng .scss. Cấu hình ví dụ Grunt:

copy: {
    dev: {
        files: [
            {
                src: "node_modules/some_module/some_precompiled.css",
                dest: "target/resources/some_module_styles.scss"
            }
        ]
    }
}

Sau đó, bạn có thể nhập tệp .scss từ scss cha của bạn (trong ví dụ của tôi, nó thậm chí được nhập vào một khối):

my-selector {
  @import "target/resources/some_module_styles.scss";
  ...other rules...
}

Lưu ý: điều này có thể nguy hiểm, vì nó sẽ dẫn đến hiệu quả là css sẽ được phân tích cú pháp nhiều lần. Kiểm tra css ban đầu của bạn để biết nó có chứa bất kỳ tạo tác nào có thể hiểu được scss (không thể thực hiện được, nhưng nếu nó xảy ra, kết quả sẽ khó gỡ lỗi và nguy hiểm).

Bây giờ có thể sử dụng:

@import 'CSS:directory/filename.css';

Tôi có thể xác nhận điều này hoạt động:

class CSSImporter < Sass::Importers::Filesystem
  def extensions
    super.merge('css' => :scss)
  end
end

view_context = ActionView::Base.new
css = Sass::Engine.new(
  template,
  syntax:     :scss,
  cache:      false,
  load_paths: Rails.application.assets.paths,
  read_cache: false,
  filesystem_importer: CSSImporter # Relevant option,

  sprockets:  {
    context:     view_context,
    environment: Rails.application.assets
  }
).render

Tín dụng cho Chriss Epstein: https://github.com/sass/sass/issues/193

Đơn giản.

@import "đường dẫn / đến / file.css";