นำเข้าไฟล์ CSS ปกติในไฟล์ SCSS หรือไม่

อย่างไรก็ตามมีการนำเข้าไฟล์ CSS ปกติด้วย@importคำสั่งของ Sass หรือไม่? ในขณะที่ฉันไม่ได้ใช้ไวยากรณ์ SCSS ทั้งหมดจาก sass ฉันยังคงสนุกกับการรวม / บีบอัดคุณสมบัติและต้องการใช้โดยไม่ต้องเปลี่ยนชื่อไฟล์ทั้งหมดเป็น * .scss

ดูเหมือนว่านี่จะไม่ถูกนำไปใช้งานจริง ณ เวลาที่เขียนนี้:

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

สำหรับ libsass (การใช้งาน C / C ++) การนำเข้าจะทำงาน*.cssในลักษณะเดียวกับ*.scssไฟล์ - เพียงแค่ละเว้นส่วนขยาย:

@import "path/to/file";

สิ่งนี้จะนำเข้า path/to/file.cssนี้จะนำเข้า

ดูคำตอบนี้สำหรับรายละเอียดเพิ่มเติม

ดูคำตอบนี้สำหรับการใช้ทับทิม (sass gem)

หลังจากมีปัญหาเดียวกันฉันก็สับสนกับคำตอบทั้งหมดที่นี่และความคิดเห็นเกี่ยวกับพื้นที่เก็บข้อมูลของ sass ใน GitHub

ฉันแค่ต้องการชี้ให้เห็นว่าในเดือนธันวาคม 2014 ปัญหานี้ได้รับการแก้ไขแล้ว ตอนนี้เป็นไปได้ที่จะนำเข้าcssไฟล์ลงในไฟล์ sass ของคุณโดยตรง PRต่อไปนี้ใน github ช่วยแก้ปัญหา

ไวยากรณ์เหมือนกันในตอนนี้ - @import "your/path/to/the/file"โดยไม่มีนามสกุลหลังจากชื่อไฟล์ สิ่งนี้จะนำเข้าไฟล์ของคุณโดยตรง หากคุณต่อ*.cssท้ายมันจะแปลเป็นcssกฎ@import url(...)กฎ

ในกรณีที่คุณกำลังใช้บางส่วนของ "แฟนซี" bundlers โมดูลใหม่ ๆ เช่นwebpackคุณอาจจะต้องใช้การใช้งาน~ในการเริ่มต้นของเส้นทาง ดังนั้นหากคุณต้องการนำเข้าพา ธ ต่อไปนี้node_modules/bootstrap/src/core.scssคุณจะต้องเขียนบางอย่างเช่น
@import "~bootstrap/src/core"คุณจะเขียนสิ่งที่ต้องการ

หมายเหตุ:
ดูเหมือนว่านี่จะไม่ทำงานสำหรับทุกคน หากล่ามของคุณจะขึ้นอยู่กับlibsassว่ามันควรจะทำงานดี (ชำระเงินนี้ ) ฉันทดสอบโดยใช้@importกับ node-sass และมันใช้งานได้ดี น่าเสียดายที่นี่ใช้งานได้และไม่สามารถใช้งานได้ในบางกรณีทับทิม

คุณต้อง prepend ขีดไปยังไฟล์ CSS ที่จะรวมและสลับการขยายการ SCSS (เช่น: _yourfile.scss) จากนั้นคุณต้องเรียกมันด้วยวิธีนี้:

@import "yourfile";

และจะรวมเนื้อหาของไฟล์แทนการใช้ CSS @import directive มาตรฐาน

สิ่งนี้ถูกนำไปใช้และผสานเริ่มตั้งแต่เวอร์ชัน3.2( ดึง # 754รวมกับ2 มกราคม 2558สำหรับlibsassปัญหาต้นฉบับถูกกำหนดที่นี่: sass# 193 # 556 , libsass# 318 )

หากต้องการตัดเรื่องสั้นที่มีความยาวให้ใช้ไวยากรณ์ในหัวข้อถัดไป:

1. เพื่อนำเข้า (รวม) ไฟล์ CSS ดิบ

   ไวยากรณ์ไม่มี.cssส่วนท้าย (ผลลัพธ์ในการอ่านจริงของบางส่วนs[ac]ss|cssและรวมเป็นแบบอินไลน์ไปยัง SCSS / SASS):

   @import "path/to/file";

2. เพื่อนำเข้าไฟล์ CSS ในแบบดั้งเดิม

   ไวยากรณ์เป็นไปในลักษณะดั้งเดิมโดยมี.cssส่วนขยายที่ส่วนท้าย (ผลลัพธ์เป็น@import url("path/to/file.css");CSS ที่รวบรวมของคุณ):

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

และมันก็เป็นเรื่องที่ดีมาก: ไวยากรณ์นี้มีความหรูหราและพูดน้อยรวมถึงเข้ากันได้ย้อนหลัง! มันทำงานได้ดีกับlibsassและnode-sassและ

__

เพื่อหลีกเลี่ยงการคาดเดาต่อไปในความคิดเห็นเขียนนี้อย่างชัดเจน: ทับทิมตามSassยังคงมีคุณลักษณะนี้unimplementedหลังจาก 7 ปีของการอภิปราย เมื่อถึงเวลาของการเขียนคำตอบนี้ก็สัญญาว่าใน 4.0 @useจะมีวิธีง่ายๆในการบรรลุเป้าหมายนี้อาจจะด้วยความช่วยเหลือของ ดูเหมือนว่าจะมีการดำเนินการในไม่ช้าแท็ก"การวางแผน" "การยอมรับข้อเสนอ" ที่ได้รับมอบหมายใหม่ได้ถูกกำหนดไว้สำหรับปัญหา # 556และ@useคุณลักษณะใหม่

คำตอบอาจจะมีการอัปเดตเร็วที่สุดเท่าที่มีการเปลี่ยนแปลงบางสิ่งบางอย่าง

ข่าวดีสำหรับทุกคน Chris Eppstein สร้างปลั๊กอินเข็มทิศพร้อมฟังก์ชั่นการนำเข้าแบบอินไลน์ css:

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

ตอนนี้การนำเข้าไฟล์ CSS นั้นง่ายเหมือน:

@import "CSS:library/some_css_file"

หากคุณมี.cssไฟล์ที่คุณไม่ต้องการที่จะปรับเปลี่ยนไม่เปลี่ยนนามสกุลเพื่อ.scss( เช่นไฟล์นี้มาจากโครงการคดเคี้ยวคุณไม่รักษา ) คุณก็สามารถสร้าง symlink และจากนั้นจึงนำ.scssเข้าของคุณ

สร้าง symlink:

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

อิมพอร์ตไฟล์ symlink ไปยังเป้าหมาย.scss:

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

.cssไฟล์เอาต์พุตเป้าหมายของคุณกำลังเก็บเนื้อหาจาก.scssไฟล์symlink ที่นำเข้าไม่ใช่กฎการนำเข้า CSS ( กล่าวถึงโดย @yaz ที่มีคะแนนความคิดเห็นสูงสุด ) และคุณไม่มีไฟล์ซ้ำที่มีนามสกุลต่างกันการอัพเดทใด ๆ ที่ทำใน.cssไฟล์เริ่มต้นจะถูกนำเข้าสู่ผลลัพธ์เป้าหมายทันที

ลิงก์สัญลักษณ์ (เช่น symlink หรือ soft link) เป็นไฟล์ชนิดพิเศษที่มีการอ้างอิงไปยังไฟล์อื่นในรูปแบบของพา ธ สัมบูรณ์หรือสัมพัทธ์และที่มีผลต่อการจำแนกชื่อพา ธ
- http://en.wikipedia.org/wiki/Symbolic_link

คุณสามารถใช้บุคคลที่สามในimporterการปรับแต่ง@importซีแมนทิกส์

node-sass-import-oneซึ่งทำงานกับnode-sass (สำหรับ Node.js) สามารถนำเข้าไฟล์ CSS แบบอินไลน์

ตัวอย่างการใช้งานโดยตรง:

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

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

ตัวอย่างการกำหนดค่า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"
      }
    }
  });

โปรดทราบว่า node-sass-import-one ไม่สามารถนำเข้าส่วนของ Sass ได้โดยไม่ต้องขีดเส้นใต้ชัดเจน ตัวอย่างเช่นกับไฟล์partials/_partial.scss:

• @import partials/_partial.scss ประสบความสำเร็จ
• @import * partials/partial.scss ล้มเหลว

โดยทั่วไปจะทราบว่าเป็นผู้นำเข้าที่กำหนดเองสามารถเปลี่ยนใด ๆความหมายนำเข้า อ่านเอกสารก่อนเริ่มใช้งาน

หากฉันถูกต้อง css เข้ากันได้กับ scss เพื่อให้คุณสามารถเปลี่ยนส่วนขยายของ css เป็น scss และควรทำงานต่อไป เมื่อคุณเปลี่ยนส่วนขยายแล้วคุณสามารถนำเข้าส่วนขยายนั้นและจะรวมอยู่ในไฟล์

หากคุณไม่ทำ sass นั้นจะใช้ css @import ซึ่งเป็นสิ่งที่คุณไม่ต้องการ

ฉันค้นพบวิธีที่หรูหราราวกับ Rails ที่จะทำ ก่อนอื่นให้เปลี่ยนชื่อ.scssไฟล์ของคุณเป็น.scss.erbจากนั้นใช้ไวยากรณ์เช่นนี้ (ตัวอย่างสำหรับเนื้อหา CSS อัญมณี highlight_js-rails4 ):

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

ทำไมคุณไม่สามารถโฮสต์ไฟล์โดยตรงผ่าน SCSS :

การดำเนินการ@importใน SCSS นั้นทำงานได้ดีสำหรับไฟล์ CSS ตราบใดที่คุณใช้เส้นทางแบบเต็มไม่ทางใดก็ทางหนึ่ง ในโหมดการพัฒนาrails sให้บริการสินทรัพย์โดยไม่ต้องรวบรวมดังนั้นเส้นทางเช่นนี้ทำงาน ...

@import "highlight_js/github.css";

... /assets/highlight_js/github.cssเพราะเส้นทางที่เจ้าภาพเป็นตัวอักษร หากคุณคลิกขวาที่หน้าและ "ดูแหล่งที่มา" จากนั้นคลิกที่ลิงค์สำหรับสไตล์ชีทที่มีด้านบน@importคุณจะเห็นบรรทัดที่มีลักษณะดังนี้:

@import url(highlight_js/github.css);

เครื่องยนต์ SCSS แปลไป"highlight_js/github.css" url(highlight_js/github.css)สิ่งนี้จะทำงานได้จนกว่าคุณจะตัดสินใจลองใช้งานในการผลิตโดยที่สินทรัพย์ถูกคอมไพล์ไว้ล่วงหน้ามีแฮชแทรกลงในชื่อไฟล์ ไฟล์ SCSS จะยังคงเป็นสแตติก/assets/highlight_js/github.cssที่ไม่ได้ทำการคอมไพล์ล่วงหน้าและไม่มีอยู่ในการผลิต

โซลูชันนี้ทำงานอย่างไร:

ประการแรกด้วยการย้าย.scssไฟล์ไปที่.scss.erbเราได้เปลี่ยน SCSS เป็นเทมเพลตสำหรับ Rails อย่างมีประสิทธิภาพ ตอนนี้เมื่อใดก็ตามที่เราใช้<%= ... %>เทมเพลตแท็กตัวประมวลผลเทมเพลต Rails จะแทนที่ตัวอย่างเหล่านี้ด้วยผลลัพธ์ของรหัส (เช่นเดียวกับเทมเพลตอื่น ๆ )

การระบุasset_path("highlight_js/github")ใน.scss.erbไฟล์ทำสองสิ่ง:

1. ทริกเกอร์rake assets:precompileงานเพื่อคอมไพล์ไฟล์ CSS ที่เหมาะสม
2. สร้าง URL ที่สะท้อนสินทรัพย์อย่างเหมาะสมโดยไม่คำนึงถึงสภาพแวดล้อมของ Rails

นี่ก็หมายความว่าเอ็นจิน SCSS ไม่ได้แยกไฟล์ CSS ด้วย มันเป็นเพียงการโฮสต์ลิงก์ไปยังมัน! ดังนั้นจึงไม่มีแพทช์ลิง hokey หรือวิธีแก้ปัญหาขั้นต้น เราให้บริการเนื้อหา CSS ผ่าน SCSS ตามที่ตั้งใจไว้และใช้ URL เพื่อบอกเนื้อหา CSS ว่าเป็น Rails ไว้ หวาน!

วิธีแก้ปัญหาง่าย ๆ :

ไฟล์ css ทั้งหมดหรือเกือบทั้งหมดสามารถตีความได้เช่นกันว่าเป็นไฟล์ scss นอกจากนี้ยังช่วยให้สามารถนำเข้าไว้ในบล็อก เปลี่ยนชื่อ css เป็น scss และนำเข้ามัน

ในการกำหนดค่าจริงของฉันฉันทำต่อไปนี้:

ก่อนอื่นฉันจะคัดลอกไฟล์. css ไปที่ไฟล์ชั่วคราวคราวนี้มาพร้อมกับนามสกุล. ตัวอย่างการกำหนดค่า Grunt:

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

จากนั้นคุณสามารถนำเข้าไฟล์. scss จาก scss หลักของคุณ (ในตัวอย่างของฉันมันจะถูกนำเข้าไปยังบล็อก):

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

หมายเหตุ: สิ่งนี้อาจเป็นอันตรายได้เนื่องจากจะส่งผลอย่างมีประสิทธิภาพว่า css จะถูกแยกวิเคราะห์หลายครั้ง ตรวจสอบ css ดั้งเดิมของคุณว่ามีสิ่งประดิษฐ์ใด ๆ ที่สามารถตีความได้ของ scss (เป็นไปไม่ได้ แต่ถ้ามันเกิดขึ้นผลลัพธ์จะยากต่อการดีบักและอันตราย)

ตอนนี้มันเป็นไปได้โดยใช้:

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

ฉันสามารถยืนยันงานนี้:

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

ให้เครดิตกับ Chriss Epstein: https://github.com/sass/sass/issues/193

ง่าย

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