SASS ব্যবহার করার সময় আমি কীভাবে একটি পৃথক ডিরেক্টরি থেকে একটি ফাইল আমদানি করতে পারি?

Question 1

SASS এ, অন্য ডিরেক্টরি থেকে কোনও ফাইল আমদানি করা কি সম্ভব? উদাহরণস্বরূপ, আমার যদি এর মতো কাঠামো থাকে:

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

টেমপ্লেট.এসএসএস ব্যবহার করে _ কমন.এসএসএস আমদানি করতে পারে @import "common"তবে আরও_ স্টাইল.এসএসএস এর জন্য _ কমন.এসএসএস আমদানি করা কি সম্ভব? আমি সহ কয়েকটি ভিন্ন জিনিস চেষ্টা করেছি @import "../sub_directory_a/common"এবং @import "../sub_directory_a/_common.scss"কিছুই কাজ করছে বলে মনে হচ্ছে না।

Question 2

দেখে মনে হচ্ছে SASS তে কিছু পরিবর্তন সম্ভব হয়েছে যা আপনি প্রাথমিকভাবে করার চেষ্টা করেছেন:

@import "../subdir/common";

এমনকি আমরা এটিতে অবস্থিত কিছু সম্পূর্ণ সম্পর্কযুক্ত ফোল্ডারের জন্য কাজ করতে এটি পেয়েছি c:\projects\sass:

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

../ড্রাইভের মূলটি শেষ হয়ে যাবে এবং আপনি ভাল হয়ে যাবেন তা নিশ্চিত করার জন্য পর্যাপ্ত পরিমাণ যোগ করুন ।

অবশ্যই, এই সমাধানটি বেশ দূরে, তবে আমি সম্পূর্ণ ভিন্ন ফোল্ডার থেকে আমদানি করতে পারি না, একইরূপেI c:\projects\sass পরিবেশের পরিবর্তনশীল SASS_PATH(থেকে : লোড_প্যাথস রেফারেন্স ) ব্যবহার করে বা সেট করে না ।

Question 3

সাসের লোড পথে যুক্ত করতে আপনি রুবি কোড থেকে -Iকমান্ড লাইন সুইচ বা :load_pathsবিকল্পটি ব্যবহার করতে পারেন sub_directory_a। সুতরাং আপনি যদি সাস থেকে চালাচ্ছেন তবে root_directoryএরকম কিছু করুন:

sass -I sub_directory_a --watch sub_directory_b:sub_directory_b

তারপর আপনি কেবল ব্যবহার করতে পারেন @import "common"মধ্যে more_styles.scss।

Question 4

সাস-লোডার সহ ওয়েবপ্যাক ব্যবহার করে আমি ~প্রকল্পের মূল পথটি উল্লেখ করতে পারি। যেমন ওপিএস ফোল্ডারের কাঠামো ধরে নেওয়া এবং আপনি সাব_ডাইরেক্টরি_ বি এর ভিতরে একটি ফাইলে রয়েছেন:

@import "~sub_directory_a/_common";

ডকুমেন্টেশন: https://github.com/webpack-contrib/sass-loader#resolving-import-at-rules

Question 5

.scssএকটি ভিন্ন আপেক্ষিক অবস্থানের সাথে নেস্টেড আমদানি রয়েছে এমন কোনও ফাইল আমদানি কাজ করবে না। শীর্ষ প্রস্তাবিত উত্তর (প্রচুর ব্যবহার করে ../) কেবল একটি নোংরা হ্যাক যা ../আপনার প্রকল্পের ডিপ্লোয়মেন্ট ওএসের মূল পর্যন্ত পৌঁছানোর জন্য যথেষ্ট পরিমাণে যুক্ত হয়ে কাজ করবে ।

এসসিএসএস সংকলকটির জন্য অনুসন্ধান লক্ষ্য হিসাবে লক্ষ্য এসসিএসএস পাথ যুক্ত করুন। এসএসএস কনফিগারেশন ফাইলে স্টাইলশিট ফোল্ডার যুক্ত করে এটি অর্জন করা যেতে পারে, এটি আপনি ব্যবহার করছেন ফ্রেমওয়ার্কটির ফাংশন,

ব্যবহার :load_pathsএ config.rdকম্পাস ভিত্তিক অবকাঠামো জন্য (যাত্রা। পাগল)

নিম্নলিখিত কোড ব্যবহার scss-config.jsonজন্যfourseven/meteor-scss

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

পরম পাথ (বনাম সম্পর্কিত পাথ) ব্যবহার করুন।

উদাহরণস্বরূপ, এর সাহায্যে fourseven/meteor-scssআপনি নীচের উদাহরণ {}অনুযায়ী আপনার প্রকল্পের শীর্ষ স্তরের হাইলাইট করতে ব্যবহার করতে পারেন

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

Question 6

নির্বাচিত উত্তর একটি কার্যকর সমাধান সরবরাহ করে না।

ওপির অনুশীলন অনিয়মিত বলে মনে হচ্ছে। একটি ভাগ / সাধারণ ফাইল সাধারণত partialsএকটি স্ট্যান্ডার্ড বয়লারপ্লেট ডিরেক্টরি অধীনে বাস করে । তারপরে partialsআপনার কোডের যে কোনও জায়গায় পার্টিয়ালগুলি সমাধান করার জন্য আপনার কনফিগার আমদানির পথে ডিরেক্টরি যুক্ত করা উচিত ।

আমি যখন প্রথমবার এই সমস্যাটির মুখোমুখি হয়েছিলাম তখন আমি বুঝতে পেরেছি SASS সম্ভবত আপনাকে নোডের অনুরূপ একটি বৈশ্বিক পরিবর্তনশীল দেয় __dirnameযা বর্তমান কার্যনির্বাহী ডিরেক্টরিতে ( cwd) নিরঙ্কুশ পথ রাখে । দুর্ভাগ্যক্রমে, এটি হয় না এবং কারণ হ'ল @importনির্দেশের ক্ষেত্রে অন্তরঙ্গকরণ সম্ভব নয়, সুতরাং আপনি গতিশীল আমদানি পথটি করতে পারবেন না।

SASS ডক্স অনুসারে ।

:load_pathsআপনার Sass কনফিগারেশনে আপনাকে সেট করতে হবে । যেহেতু ওপি কম্পাস ব্যবহার করে, আমি এখানে ডকুমেন্টেশন অনুসারে এটি অনুসরণ করব ।

আপনি সিএলআই সমাধানটি উদ্দেশ্য হিসাবে যেতে পারেন, তবে কেন? এটি যুক্ত করা অনেক বেশি সুবিধাজনক config.rb। ওভাররাইডের জন্য সিএলআই ব্যবহার করা বোধগম্য হবে config.rb(উদাঃ, বিভিন্ন বিল্ডের দৃশ্যপট)

সুতরাং, আপনার config.rbপ্রকল্পের মূলের আওতায় ধরে নিচ্ছেন, কেবল নিম্নলিখিত লাইনটি যুক্ত করুন: add_import_path 'sub_directory_a'

এবং এখন @import 'common';ঠিক যে কোনও জায়গায় কাজ করবে।

যদিও এটি ওপিকে উত্তর দেয়, আরও রয়েছে।

পরিশিষ্ট

আপনি এমবেডেড পদ্ধতিতে কোনও সিএসএস ফাইল আমদানি করতে চান এমন ক্ষেত্রে আপনি সম্ভবত দৌড়াতে পারেন, এটি ভ্যানিলা @importনির্দেশিকা সিএসএসের মাধ্যমে নয় , তবে আপনার এসএএসএসের সাথে সিএসএস ফাইলের সামগ্রীতে প্রকৃত সংযুক্তি রয়েছে। এখানে আরও একটি প্রশ্ন রয়েছে , যার উত্তর অবিচ্ছিন্নভাবে দেওয়া হয়েছে (সমাধানটি আন্তঃ-পরিবেশে কাজ করে না)। তারপরে সমাধানটি হ'ল এই SASS এক্সটেনশনটি ব্যবহার করা ।

একবার ইনস্টল হয়ে গেলে আপনার কনফিগারেশনে নিম্নলিখিত লাইনটি যুক্ত করুন: require 'sass-css-importer'এবং তারপরে আপনার কোডের কোথাও:@import 'CSS:myCssFile';

এই কাজ করার জন্য এক্সটেনশনটি বাদ দিতে হবে তা লক্ষ্য করুন।

যাইহোক, অ-ডিফল্ট পাথ থেকে সিএসএস ফাইল আমদানির চেষ্টা করার সময় আমরা একই সমস্যাটিতে চলে যাব এবং add_import_pathসিএসএস ফাইলগুলিকে সম্মান করি না। সুতরাং এটি সমাধান করার জন্য, আপনাকে নিজের কনফিগারেশনে আরও একটি লাইন যুক্ত করতে হবে যা প্রাকৃতিকভাবে অনুরূপ:

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

এখন সবকিছু সুন্দরভাবে কাজ করবে।

পিএস, আমি লক্ষ্য করেছি sass-css-importerডকুমেন্টেশনগুলি নির্দেশ করে CSS:যে .cssএক্সটেনশান বাদ দেওয়ার পাশাপাশি একটি উপসর্গও প্রয়োজন । আমি নির্বিশেষে এটি কাজ করে খুঁজে পেয়েছি। কেউ একটি সমস্যা শুরু করেছিলেন , যা এখনও অবধি উত্তরহীন রয়ে গেছে।

Question 7

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 আরো বিস্তারিত জানার জন্য।

Question 8

গুল্প আপনার সাস ফাইলগুলি দেখার জন্য এবং অন্তর্ভুক্তপথগুলির সাথে অন্য ফাইলের পাথ যুক্ত করার জন্য কাজ করবে। উদাহরণ:

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

Question 9

ফাইলটি আমদানি করতে সংজ্ঞায়িত করতে সমস্ত ফোল্ডারগুলির সাধারণ সংজ্ঞা ব্যবহার করা সম্ভব। আপনাকে কেবল সচেতন হতে হবে যে এটির সংজ্ঞা দিচ্ছেন এমন ফাইলের সাথে এটি সম্পর্কিত to আপনি এখানে পরীক্ষা করতে পারেন উদাহরণ সহ আমদানি বিকল্প সম্পর্কে আরও ।

Question 10

তাহলে ব্যবহার ওয়েব কম্পাইলার ভিসুয়াল স্টুডিও আপনি পাথ যোগ করতে পারেন includePathcompilerconfig.json.defaults হবে। এরপরে সংখ্যক সংখ্যার প্রয়োজন নেই ../কারণ সংকলকটি আমদানি সন্ধানের জন্য অন্তর্ভুক্তপথকে অবস্থান হিসাবে ব্যবহার করবে।

উদাহরণ স্বরূপ:

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

Question 11

এটি অর্ধেক উত্তর।

কম্পাস পরীক্ষা করে দেখুন , এটির সাহায্যে আপনি নিজের ফোল্ডারের _common.scssভিতরে রাখতে পারেন partialsএবং এটি দিয়ে আমদানি করতে পারেন @import commonতবে এটি প্রতিটি ফাইলে কাজ করে।

Question 12

আমি একই সমস্যা মধ্যে দৌড়ে। আমার সমাধান থেকে আমি এই মধ্যে এসেছি। সুতরাং এখানে আপনার কোড:

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

আমি যতদূর জানি যে আপনি যদি একটি স্ক্যাস অন্যটিতে আমদানি করতে চান তবে এটি একটি আংশিক হতে হবে। আপনি বিভিন্ন ডিরেক্টরি থেকে আমদানি করছি যখন আপনার নামের more_styles.scssজন্য _more_styles.scss। তারপরে এটি আপনার template.scss@ ইমপোর্টের মতো আমদানি করুন ../sub_directory_b/_more_styles.scss। এটা আমার জন্য কাজ করেছে। আপনি যেমন ../sub_directory_a/_common.scssকাজ না করার কথা উল্লেখ করেছেন । এটি একই ডিরেক্টরি template.scss। এজন্য এটি কাজ করবে না।

Question 13

অন্তর্ভুক্তপথগুলির প্যারামিটারটি ব্যবহার করে দেখুন ...

"এসএএসএস @ ইম্পোর্টগুলি সমাধান করার সময় SASS সংকলক লোডপথগুলিতে প্রতিটি পাথ ব্যবহার করে।"

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

Question 14

সাস-লোডার ব্যবহারকারীর পক্ষে সবচেয়ে ভাল উপায়। এটি এনপিএম প্যাকেজ হিসাবে উপলব্ধ। এটি পাথ সম্পর্কিত সমস্ত সমস্যা সমাধান করে এবং এটিকে অতি সহজ করে তোলে।

Question 15

আমারও একই সমস্যা ছিল এবং আমি ফাইলটির মতো পথ যুক্ত করে সমাধানটি পেয়েছি:

@ আইম্পোর্ট "সি: / এক্সএ্যাম্প্প / এইচটিডোকস / স্কেস_এডডনস / বুটস্ট্র্যাপ / বুটস্ট্র্যাপ";

@ আইম্পোর্ট "সি: / এক্সএএমপি / এইচটিডোকস / স্ক্যাস_এডডনস / কম্পাস / কম্পাস";