ใน SASS สามารถนำเข้าไฟล์จากไดเร็กทอรีอื่นได้หรือไม่? ตัวอย่างเช่นถ้าฉันมีโครงสร้างแบบนี้:

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

template.scss สามารถนำเข้า _common.scss โดยใช้@import "common"แต่ more_styles.scss นำเข้า _common.scss ได้หรือไม่ ฉันพยายามสิ่งที่แตกต่างกันไม่กี่รวมทั้ง@import "../sub_directory_a/common"และ@import "../sub_directory_a/_common.scss"แต่ไม่มีอะไรดูเหมือนว่าจะทำงาน

ดูเหมือนว่าการเปลี่ยนแปลงบางอย่างใน SASS ทำให้สิ่งที่คุณได้ลองทำในตอนแรกเป็นไปได้:

@import "../subdir/common";

เรายังทำให้สิ่งนี้ใช้ได้กับโฟลเดอร์ที่ไม่เกี่ยวข้องโดยสิ้นเชิงที่อยู่ในc:\projects\sass:

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

เพิ่ม../ให้เพียงพอเพื่อให้แน่ใจว่าคุณจะจบลงที่ไดรฟ์รูทและคุณก็พร้อมที่จะไป

แน่นอนว่าโซลูชันนี้ยังไม่สวย แต่ฉันไม่สามารถนำเข้าจากโฟลเดอร์ที่แตกต่างกันโดยสิ้นเชิงเพื่อให้ทำงานได้ทั้งไม่ใช้I c:\projects\sassหรือตั้งค่าตัวแปรสภาพแวดล้อมSASS_PATH(จาก: load_paths reference ) เป็นค่าเดียวกัน

คุณสามารถใช้-Iสวิตช์บรรทัดคำสั่งหรือ:load_pathsตัวเลือกจากรหัส Ruby เพื่อเพิ่มsub_directory_aเส้นทางการโหลดของ Sass ดังนั้นหากคุณใช้ Sass จากroot_directoryให้ทำสิ่งนี้:

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

จากนั้นคุณสามารถใช้@import "common"ในmore_styles.scss.

การใช้ webpack กับ sass-loader ฉันสามารถใช้~เพื่ออ้างถึงเส้นทางรูทของโปรเจ็กต์ เช่นสมมติว่าโครงสร้างโฟลเดอร์ OPs และคุณอยู่ในไฟล์ภายใน sub_directory_b:

@import "~sub_directory_a/_common";

เอกสารประกอบ: https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules

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

1. เพิ่มพา ธ SCSS เป้าหมายเป็นเป้าหมายการค้นหาสำหรับคอมไพเลอร์ SCSS สิ่งนี้สามารถทำได้โดยการเพิ่มโฟลเดอร์ stylesheets ลงในไฟล์ config scss ซึ่งเป็นฟังก์ชันของกรอบงานที่คุณใช้

ใช้สำหรับกรอบ:load_pathsที่ใช้config.rdเข็มทิศ (เช่นราง)

ใช้รหัสต่อไปนี้ที่scss-config.jsonสำหรับfourseven/meteor-scss

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

2. ใช้เส้นทางสัมบูรณ์ (เทียบกับเส้นทางสัมพัทธ์)

ตัวอย่างด้วยfourseven/meteor-scssคุณสามารถใช้{}เพื่อเน้นระดับบนสุดของโครงการของคุณตามข้อสอบต่อไปนี้

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

คำตอบที่เลือกไม่ได้นำเสนอวิธีแก้ปัญหาที่เป็นไปได้

การปฏิบัติของ OP ดูเหมือนผิดปกติ ไฟล์ที่ใช้ร่วมกัน / ทั่วไปมักจะอยู่ภายใต้partialsไดเร็กทอรีสำเร็จรูปมาตรฐาน จากนั้นคุณควรเพิ่มpartialsไดเร็กทอรีในพา ธ การนำเข้า config ของคุณเพื่อแก้ไขบางส่วนที่ใดก็ได้ในโค้ดของคุณ

เมื่อฉันพบปัญหานี้เป็นครั้งแรกฉันคิดว่า SASS อาจให้ตัวแปรส่วนกลางที่คล้ายกับ Node __dirnameซึ่งเก็บเส้นทางที่แน่นอนไปยังไดเร็กทอรีการทำงานปัจจุบัน ( cwd) น่าเสียดายที่ไม่เป็นเช่นนั้นและสาเหตุที่เป็นเพราะการแก้ไข@importคำสั่งไม่สามารถทำได้ด้วยเหตุนี้คุณจึงไม่สามารถสร้างเส้นทางการนำเข้าแบบไดนามิกได้

ตามเอกสาร SASS

คุณต้องตั้งค่า:load_pathsในการกำหนดค่าSass ของคุณ ตั้งแต่ OP ใช้เข็มทิศผมจะทำตามที่มีตามเอกสารที่นี่

คุณสามารถใช้โซลูชัน CLI ได้ตามวัตถุประสงค์ แต่ทำไม? config.rbก็สะดวกสบายมากขึ้นเพื่อเพิ่มไปยัง ควรใช้ CLI ในการลบล้างconfig.rb(เช่นสถานการณ์การสร้างที่แตกต่างกัน)

ดังนั้นสมมติว่าคุณconfig.rbอยู่ภายใต้รูทโปรเจ็กต์เพียงเพิ่มบรรทัดต่อไปนี้: add_import_path 'sub_directory_a'

และตอนนี้@import 'common';จะทำงานได้ดีทุกที่

ในขณะที่คำตอบนี้ OP มีมากกว่านั้น

ภาคผนวก

คุณมีแนวโน้มที่จะวิ่งเข้ามาในกรณีที่คุณต้องการนำเข้าไฟล์ CSS ในลักษณะที่ฝังตัวอยู่, ที่อยู่, ไม่ผ่านวานิลลา@importCSS สั่งให้ออกจากกล่อง แต่จริงผสานของเนื้อหาของไฟล์ CSS กับ SASS ของคุณ มีคำถามอื่นซึ่งได้รับคำตอบอย่างไม่ชัดเจน (วิธีแก้ปัญหาไม่ทำงานข้ามสภาพแวดล้อม) การแก้ปัญหาก็คือจะใช้นี้ขยาย SASS

เมื่อติดตั้งแล้วให้เพิ่มบรรทัดต่อไปนี้ใน config ของคุณ: require 'sass-css-importer'จากนั้นบางส่วนในโค้ดของคุณ:@import 'CSS:myCssFile';

โปรดสังเกตว่าส่วนขยายจะต้องถูกละไว้เพื่อให้สามารถใช้งานได้

อย่างไรก็ตามเราจะพบปัญหาเดียวกันเมื่อพยายามนำเข้าไฟล์ CSS จากเส้นทางที่ไม่ใช่ค่าเริ่มต้นและadd_import_pathไม่เคารพไฟล์ CSS ดังนั้นในการแก้ปัญหาคุณต้องเพิ่มอีกบรรทัดใน config ของคุณซึ่งคล้ายกันโดยธรรมชาติ:

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

ตอนนี้ทุกอย่างจะทำงานได้ดี

ปล. ฉันสังเกตเห็นsass-css-importerเอกสารระบุว่าCSS:จำเป็นต้องใช้คำนำหน้านอกเหนือจากการละเว้น.cssส่วนขยาย ฉันพบว่ามันใช้งานได้โดยไม่คำนึงถึง มีคนเริ่มต้นปัญหาซึ่งยังไม่มีคำตอบจนถึงตอนนี้

Gulp จะทำงานเพื่อดูไฟล์ sass ของคุณและยังเพิ่มเส้นทางของไฟล์อื่นด้วย includePaths ตัวอย่าง:

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

node-sass (เครื่องห่อ SASS อย่างเป็นทางการสำหรับ node.js ) มีตัวเลือกบรรทัดคำสั่ง--include-pathเพื่อช่วยในข้อกำหนดดังกล่าว

ตัวอย่าง:

ในpackage.json:

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

ตอนนี้หากคุณมีไฟล์src/styles/common.scssในโปรเจ็กต์ของคุณคุณสามารถนำเข้าไฟล์ด้วยไฟล์@import 'styles/common';ได้จากทุกที่ในโปรเจ็กต์ของคุณ

อ้างอิงhttps://github.com/sass/node-sass#usage-1สำหรับรายละเอียดเพิ่มเติม

ในการกำหนดไฟล์ที่จะนำเข้าคุณสามารถใช้คำจำกัดความทั่วไปของโฟลเดอร์ทั้งหมดได้ คุณต้องทราบว่ามันสัมพันธ์กับไฟล์ที่คุณกำหนด ตัวเลือกนำเข้าเพิ่มเติมเกี่ยวกับตัวอย่างคุณสามารถตรวจสอบได้ที่นี่

หากใช้Web Compilerใน Visual Studio คุณสามารถเพิ่มพา ธincludePathใน compilerconfig.json.defaults จากนั้นไม่จำเป็นต้องมีจำนวน../เนื่องจากคอมไพเลอร์จะใช้ includePath เป็นตำแหน่งเพื่อค้นหาการนำเข้า

ตัวอย่างเช่น:

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

นี่เป็นคำตอบครึ่งหนึ่ง

ลองใช้เข็มทิศซึ่งคุณสามารถวางไว้_common.scssในpartialsโฟลเดอร์แล้วนำเข้าได้@import commonแต่ใช้ได้กับทุกไฟล์

ฉันพบปัญหาเดียวกัน จากวิธีแก้ปัญหาของฉันฉันเข้ามาในสิ่งนี้ นี่คือรหัสของคุณ:

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

เท่าที่ฉันรู้ว่าคุณต้องการนำเข้า scss หนึ่งไปยังอีกเครื่องหนึ่งจะต้องเป็นบางส่วน เมื่อคุณกำลังนำเข้าจากไดเรกทอรีที่แตกต่างกันชื่อของคุณจะmore_styles.scss _more_styles.scssจากนั้นนำเข้าของคุณtemplate.scssเช่น ../sub_directory_b/_more_styles.scss@import มันได้ผลสำหรับฉัน แต่ที่คุณพูดถึง../sub_directory_a/_common.scssไม่ทำงาน นั่นคือไดเรกทอรีเดียวกันของไฟล์template.scss. นั่นคือเหตุผลที่มันไม่ได้ผล

ดูโดยใช้พารามิเตอร์ includePaths ...

"คอมไพเลอร์ SASS ใช้แต่ละพา ธ ใน loadPaths เมื่อแก้ไข SASS @imports"

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

วิธีที่ดีที่สุดคือผู้ใช้ sass-loader มีให้ในรูปแบบแพ็คเกจ npm มันแก้ไขปัญหาที่เกี่ยวข้องกับเส้นทางทั้งหมดและทำให้ง่ายมาก

ฉันมีปัญหาเดียวกันและฉันพบวิธีแก้ปัญหาโดยการเพิ่มเส้นทางไปยังไฟล์เช่น:

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

@import "C: / xampp / htdocs / Scss_addons / เข็มทิศ / เข็มทิศ";