এসসিএসএস ফাইলে নিয়মিত সিএসএস ফাইল আমদানি করবেন?


508

সাসের @importকমান্ড সহ কোনও নিয়মিত সিএসএস ফাইল আমদানি করা যায় কি ? যদিও আমি এসএসএসএস থেকে সমস্ত এসএসএসএস সিনট্যাক্স ব্যবহার করছি না, তবুও আমি এটি বৈশিষ্ট্যগুলির সংমিশ্রণ / সংক্ষেপণ উপভোগ করছি এবং আমার সমস্ত ফাইল * .scss এর নাম পরিবর্তন না করে এটি ব্যবহার করতে সক্ষম হতে চাই would


1
হ্যাঁ, একটি উপায় আছে: @ ইনপুট বিবৃতিতে CSS ফাইলের পাথের মধ্যে '.ssss' এক্সটেনশনটি সরিয়ে দিন :) (সাস সংস্করণে কাজ করে> = 3.2)
কামিল কিয়েসজেউস্কি

2018 এর হিসাবে ব্যবহার Sass@import একটি নিয়মিত সিএসএস ফাইলে মাত্র একটি নিয়মিত উৎপন্ন উচিত সিএসএস @import । এর অর্থ আরও একটি এইচটিটিপি অনুরোধ এবং কোনও সংমিশ্রণ বা সংক্ষেপণ নয়। কিছু বাস্তবায়ন যদি অন্যরকম আচরণ করে তবে আমি বলব এটি একটি অ-মানক বৈশিষ্ট্য যা ভাষার বৈশিষ্ট থেকে আলাদা হয়।
vlvaro González

উত্তর:


215

এই লেখার সময় হিসাবে মনে হচ্ছে এটি বাস্তবায়নহীন:

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

লিবাসাসের (সি / সি ++ বাস্তবায়ন) জন্য, আমদানি ফাইলগুলির *.cssমতো একইভাবে কাজ *.scssকরে - কেবলমাত্র এক্সটেনশানটি বাদ দিন:

@import "path/to/file";

এটি আমদানি করবে path/to/file.css

আরও তথ্যের জন্য এই উত্তর দেখুন ।

রুবি বাস্তবায়নের জন্য এই উত্তরটি দেখুন (সাস মণি)


23
@ ক্লেইনফ্রেন্ড সাস ৩.৩.১ এর সাথে সত্য নয়। @importবিবৃতি সব এবং তার ফলে সিএসএস ফাইলে প্রদর্শিত হয় পরিবর্তন করা হয় না, Sass অন্তর্ভুক্ত নয় @GSto মত রেফারেন্সড সিএসএস ফাইল চাইছে। দেখে মনে হচ্ছে এটি সাস 3.4 বা 4.0 এ কার্যকর করা হবে
ফ্রেগান্ট

1
আপনি যদি গুল্প বা গ্রান্ট ব্যবহার করছেন তবে আপনার সিএসএস ফাইলগুলি আমদানি করার জন্য একটি আলাদা সরঞ্জামটি ব্যবহার করুন, এটি সহজ এবং এটি এখন কাজ করে । আমি গুল্প-ইম্পোর্ট-সিএসএস ব্যবহার করি, গ্রান্টের সমতুল্য কী তা আমি নিশ্চিত নই।
ফ্রেংতে

3
এটি libsassকমপক্ষে সঙ্গে কাজ করে । উত্তর দেখার stackoverflow.com/questions/7111610/... এবং জনসংযোগ github.com/sass/libsass/pull/754
ivn

"আমদানি ফাইলগুলির *.cssজন্য একইভাবে কাজ *.cssকরে" একটি টাউটোলজি। আপনি তাদের একজন হতে চেয়েছিলেন *.scss, তাই না?
আন্ডারস্কোর_১

1
V3.5.3 থেকে শুরু করে, লিবাসাস সতর্ক করে দেয় যে এটি মানহীন আচরণ এবং এর উপর নির্ভর করা উচিত নয়। (পরিবর্তে "এই আচরণ বজায় রাখতে একটি কাস্টম আমদানিকারক ব্যবহার করুন" ") github.com/sass/libsass/releases/tag/3.5.3
iX3

383

একই সমস্যা থাকার পরে, আমি এখানে সমস্ত উত্তর এবং গিথুব মধ্যে স্যাস এর সংগ্রহস্থল সম্পর্কে মন্তব্য গুলিতে বিভ্রান্ত হয়ে পড়েছিলাম।

আমি কেবল উল্লেখ করতে চাই যে ২০১৪ সালের ডিসেম্বর হিসাবে এই সমস্যাটি সমাধান হয়েছে। cssআপনার sass ফাইলে সরাসরি ফাইলগুলি আমদানি করা সম্ভব । নিম্নলিখিত জনসংযোগ GitHub বিষয়টি solves।

সিনট্যাক্সটি এখনকার মতো - @import "your/path/to/the/file"ফাইলের নামের পরে কোনও এক্সটেনশন ছাড়াই। এটি সরাসরি আপনার ফাইল আমদানি করবে। আপনি যদি *.cssশেষে যুক্ত হন তবে এটি cssনিয়মে অনুবাদ করবে @import url(...)

যদি আপনি "অভিনব" নতুন মডিউল যেমন bundlers কিছু ব্যবহার করছেন webpack , আপনি সম্ভবত ব্যবহার ব্যবহার করতে হবে ~পথের শুরুতে। সুতরাং, আপনি যদি নিম্নলিখিত পথটি আমদানি করতে চান তবে আপনি এমন node_modules/bootstrap/src/core.scssকিছু লিখবেন
@import "~bootstrap/src/core"

দ্রষ্টব্য:
মনে হচ্ছে এটি সবার জন্য কাজ করছে না। আপনার দোভাষী যদি এর উপর ভিত্তি করে থাকে তবে libsassএটি ঠিক কাজ করা উচিত ( এটি দেখুন )) আমি @importনোড-স্যাস ব্যবহার করে পরীক্ষা করেছি এবং এটি ভাল কাজ করছে। দুর্ভাগ্যক্রমে এটি কাজ করে এবং কিছু রুবি উদাহরণগুলিতে কাজ করে না।


1
এটি প্রয়োগ করা হয়েছে বলে মনে হয় libsassতবে সাসের রুবি বাস্তবায়নটি ব্যবহার করার সময় মনে হয় যে এই সিনট্যাক্সটি কাজ করে তবে কেবল আপনার sass-css-importerপ্রয়োজন হয়। কমপক্ষে আমি যা দেখছি। অন্য কেউ এটি নিশ্চিত করতে পারেন?
বিসারা

5
আপনি কি সাসের সর্বশেষতম সংস্করণটি সম্পর্কে নিশ্চিত? আমি এই সিনট্যাক্সটি কিছুক্ষণ ব্যবহার করছি এবং এটি উভয় rubyএবং nodejsদোভাষীর সাথেই কাজ করে । আপনি কি ফাইলের নামের পরে কোনও এক্সটেনশন রাখছেন না তা পরীক্ষা করে দেখেছেন? সঠিক বাক্য @import "path/to/style/file.css
গঠনটি

4
আমার জেমফিল.লক অনুসারে আমি রুবি সাস ভি 3.4.18 (জ্যাকিল সহ) ব্যবহার করছি। এখনও দেখছি Error: File to import not found or unreadable: cssdep/cssfile। আমি যদি cssdep/cssfile.scssএটি তৈরি করি হঠাৎ এটি কাজ করে। তাই কোনও পথের সমস্যা নয়, কোনও কারণে আমি এখনও
SASS

1
ruby -v: ruby 2.2.2p95 (2015-04-13 revision 50295) [x64-mingw32] sass -v: Sass 3.4.17 (Selective Steve)এখানে কাজ করছে না
সিরিল CHAPON

5
এই জন্য আপনাকে ধন্যবাদ! আমি নোট-স্যাস ব্যবহার করে নরমালাইজ.এসএসএস আমদানি করতে সক্ষম হয়েছিল@import "node_modules/normalize.css/normalize";
নিক

260

অন্তর্ভুক্ত করার জন্য আপনাকে অবশ্যই সিএসএস ফাইলের একটি আন্ডারস্কোর প্রিনেন্ড করতে হবে এবং এর এক্সটেনশানটি এসএসএসে প্রস্থান করতে হবে (প্রাক্তন _yourfile.scss:)। তারপরে আপনাকে কেবল এটিকে কল করতে হবে:

@import "yourfile";

এবং এতে সিএসএস স্ট্যান্ডার্ড @ গুরুত্বপূর্ণ নির্দেশনা ব্যবহারের পরিবর্তে ফাইলের বিষয়বস্তু অন্তর্ভুক্ত থাকবে।


1
এটি সম্ভবত সম্মেলন এবং মান সম্পর্কে কিছু।
ডেভিড মোরালেস

70
আন্ডারস্কোরটি হ'ল এটি আলাদা ফাইল হিসাবে সংকলন থেকে রোধ করবে।
জোনা

4
কারও অবাক হওয়ার ক্ষেত্রে, এটি কাজ করে কারণ সাসের এসসিএসএস সিনট্যাক্স CSS3 এর একটি সুপারস্টার। সে জন্যই সেমিকোলন প্রয়োজন।
জ্যাকব ওয়ান

46
উদাহরণস্বরূপ আপনি কিছু বিক্রেতা সিএসএস ফাইলের এক্সটেনশন পরিবর্তন করতে পারবেন না।
স্লাভা ফমিন II

7
এটি যদি আপনার কম্পিউটার / সার্ভারে থাকে তবে আপনি পারেন! আপনি যদি না চান তবে প্রতীকী লিঙ্কগুলিও রয়েছে।
টকান

260

এই বাস্তবায়ন করা হয় এবং সংস্করণ থেকে শুরু কক্ষগুলো একত্রিত হয়েছে 3.2( খিঁচ # 754 উপর মার্জ 2 জানুয়ারী 2015 জন্য libsass, বিষয় originaly এখানে সংজ্ঞায়িত করা হয়েছে: sass# 193 # 556 , libsass# 318 )।

দীর্ঘ গল্প সংক্ষিপ্ত কাটা, পরবর্তী বাক্য গঠন:

  1. কাঁচা সিএসএস-ফাইল আমদানি (অন্তর্ভুক্ত) করতে

    সিনট্যাক্সটি শেষ পর্যন্ত প্রসার ছাড়াই রয়েছে.css (আংশিক প্রকৃত পড়ার ফলাফল s[ac]ss|cssএবং এর মধ্যে এসএসএসএস / এসএএসএস-এ অন্তর্নিহিত অন্তর্ভুক্ত রয়েছে):

    @import "path/to/file";

  2. CSSতিহ্যগত উপায়ে সিএসএস-ফাইল আমদানি করতে

    সিনট্যাক্সটি প্রথাগত উপায়ে চলে যায়, শেষে .cssএক্সটেনশন সহ ( @import url("path/to/file.css");আপনার সংকলিত সিএসএসে ফলাফল ):

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

এবং এটি জঘন্যভাবে উত্তম: এই বাক্য গঠনটি মার্জিত এবং লকোনিক, আরও পিছনে সামঞ্জস্যপূর্ণ! এটি libsassএবং এর সাথে দুর্দান্তভাবে কাজ করে node-sass

__

মন্তব্যগুলিতে আরও জল্পনা-কল্পনা এড়াতে, এটিকে স্পষ্ট করে লিখুন: রুবি ভিত্তিক সাসের এখনও 7 বছর ধরে আলোচনার পরেও এই বৈশিষ্ট্যটি প্রয়োগ করা হয়নি । এই উত্তরটি লেখার সময়, এটি প্রতিশ্রুতি দেওয়া হয়েছিল যে 4.0 সালে সম্ভবত এটির সাহায্যে এটি সম্পাদন করার একটি সহজ উপায় থাকবে @use। দেখে মনে হচ্ছে খুব শীঘ্রই একটি বাস্তবায়ন হবে, # 556 ইস্যু এবং নতুন বৈশিষ্ট্যটির জন্য নতুন "পরিকল্পিত" "প্রস্তাব গৃহীত" ট্যাগ বরাদ্দ করা হয়েছে ।@use

উত্তরটি আপডেট হতে পারে, কিছু পরিবর্তন হওয়ার সাথে সাথে


3
কেবল স্পষ্ট করার জন্য, এসএসএস হিসাবে স্যাস হিসাবে আমদানি করা আমার পক্ষে এটি কাজ করেছিল: @ ইমপোর্ট ইউআরএল ("পথ / টু / ফাইল-ছাড়াই সিএসএস-এক্সটেনশন");
ক্রেগ ওয়েন

1
এটি আসলে সাসের রুবি-ভিত্তিক সংস্করণে কাজ করে না। উদাহরণস্বরূপ, কমান্ড: sass myFile.scss: আউটপুট সিএসএস একটি সিএসএস আমদানিতে ব্যর্থ হয় তবে আপনি যখন সিএসএস ফাইলের এক্সটেনশনটিকে .scss এ পরিবর্তন করেন তখন কাজ করে। এই মন্তব্যটি লেখার মতো সর্বশেষ সংস্করণটি চালান: ৩.৪.২২ / সিলেক্টিক স্টিভ। এটি রুবি সংস্করণ, গ্রান্ট-অবদান-স্যাসের মতো কোনও টাস্ক রানারকেও প্রভাবিত করে।
আনসোরেনসেন

@ আনসোরেনসেন, আমি মনে করি আপনার পক্ষ থেকে বিভ্রান্তি আছে। "আপনি যখন CSS ফাইলের এক্সটেনশনটিকে .scss এ পরিবর্তন করেন" এর দ্বারা আপনি কী বোঝায় ? পুরো ধারণাটি হ'ল নিয়মিত সিএসএস ফাইল এবং তাদের সাথে কাজ করার দুটি উপায় সম্পর্কে (এসসিএসএস আমদানিতে বিভ্রান্ত করবেন না)। আরও একবার প্রশ্ন এবং উত্তর পড়ুন দয়া করে।
ফরাসাইড

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

1
@ এনসোরেনসেন, ওম, আপনার অনেক পাঠ্য ... আমি স্পষ্ট ছিলাম, এবং কাউকে বিভ্রান্ত করব না don't Node-sassএটি একটি নোড.জেএস লাইব্রেরি লিবাসাস ( সাসের সি সংস্করণ )। নেই একটি একক উল্লেখ যে libsassবা node-sassরুবি ভিত্তি করে না শুধুমাত্র মূল প্রশ্নে রুবি সংস্করণ সম্পর্কে একটি একক উল্লেখ। পরের বার পর পর তিনটি মন্তব্য লেখার আগে দয়া করে সাবধানে পড়ুন। আমার সমস্ত তথ্যসূত্র রয়েছে: # 193 ইস্যু অনুসারে এটি রুবি সংস্করণে 5 বছর আলোচনার পরে এখনও প্রয়োগ করা হয়নি, তারা কেবলমাত্র ver এর পরে এই কার্যকারিতাটি প্রতিশ্রুতি দেয় 4.0 পাওয়া যাবে।
ফারসাইড

37

সবার জন্য সুসংবাদ, ক্রিস এপস্টিন ইনলাইন সিএসএস আমদানি কার্যকারিতা সহ একটি কম্পাস প্লাগইন তৈরি করেছেন:

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

এখন, সিএসএস ফাইল আমদানি করা যতটা সহজ:

@import "CSS:library/some_css_file"

3
অবচয়জনক প্রারম্ভিক পয়েন্টটি ব্যবহারের কারণে ব্যর্থ। "কী, তবে কখনই হতে পারে না ..." আমি নিশ্চিত যে এটি যখন প্রথম প্রকাশিত হয়েছিল তখন দুর্দান্ত ছিল, তবে এটির পুনরায় কাজ করার জন্য একটি আপডেট দরকার, অথবা আপনাকে অবহেলিত প্লাগইন ইনস্টল করতে হবে। ধন্যবাদ, সি§
সিএসএস

18

আপনার যদি এমন কোনও .cssফাইল থাকে যা আপনি সংশোধন করতে চান না, এর এক্সটেনশানটিও এতে পরিবর্তন করবেন না .scss( উদাহরণস্বরূপ এই ফাইলটি আপনি বজায় রাখছেন না এমন একটি কাঁটাযুক্ত প্রকল্পের ), আপনি সর্বদা একটি সিমিলিংক তৈরি করতে পারেন এবং তারপরে এটি আপনার আমদানি করতে পারেন .scss

একটি সিমিলিংক তৈরি করে:

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


একটি লক্ষ্য হিসাবে সিমলিংক ফাইল আমদানি করে .scss:

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


আপনার টার্গেট আউটপুট .cssফাইলটি .scssকোনও সিএসএস আমদানির নিয়ম নয়, আমদানিকৃত সিএমলিংক ফাইল থেকে সামগ্রীগুলি ধরে রাখতে চলেছে ( সর্বোচ্চ মন্তব্য ভোটের সাথে @ ইয়াজ উল্লেখ করেছেন )। এবং আপনার কাছে বিভিন্ন এক্সটেনশনের ডুপ্লিকেটযুক্ত ফাইল নেই, প্রাথমিক .cssফাইলের অভ্যন্তরে তৈরি হওয়া কোনও আপডেট সঙ্গে সঙ্গেই আপনার টার্গেট আউটপুটটিতে আমদানি হয়ে যায়।

সিম্বলিক লিঙ্ক (এছাড়াও সিমলিংক বা সফট লিঙ্ক) একটি বিশেষ ধরণের ফাইল যা সম্পূর্ণরূপে বা আপেক্ষিক পাথ আকারে অন্য কোনও ফাইলের রেফারেন্স ধারণ করে এবং পথের নামটি রেজোলিউশনকে প্রভাবিত করে।
- http://en.wikedia.org/wiki/ সিম্বলিক_লিঙ্ক


9
একটি সিমিলিংক যুক্ত করা খুব পোর্টেবল সমাধান নয় (যেমন একাধিক বিকাশকারী বা বিল্ড সিস্টেম)
লোকালপিসিগুয়ে

@ লোকালপিসিগুয়ে হ'ল উদাহরণস্বরূপ, যখন উভয় ফাইল ( .cssএবং তৈরি করা সিমলিংক) একটি ভাগ করা সংগ্রহস্থলের মাধ্যমে উপলব্ধ থাকে।
নিক সুমিকো

আমি সবেমাত্র এটি করেছি এবং এই থ্রেডের সিম লিঙ্কগুলি সম্পর্কে উত্তর দিচ্ছি, তবে খুশী এটি ইতিমধ্যে এখানে! এটি সত্য যে এই প্রয়োজনটি বিরল, তবে আমার পরিস্থিতি সিএসএস ফাইলটি মোটেও সংশোধন করতে না চাওয়ার সাথে জড়িত (কারণ এটি একটি বোভার ফাইল ছিল), তাই একটি সিমিলিংক তৈরি করে এবং পুরোপুরি কার্যকরভাবে আমদানি করে।
অ্যারন ক্রাউস

2
জন্য উইন্ডোজ ব্যবহারকারীরা একই কার্যকারিতা একটি ভিন্ন সিনট্যাক্স হবে mklink /H <link> <target>, এবং এটি বলা হচ্ছে হার্ড লিংক @mrsafraz।
ফারসাইড

5

শব্দার্থক importerকাস্টমাইজ করতে আপনি একটি তৃতীয় পক্ষ ব্যবহার করতে পারেন @import

নোড-স্যাস-ইম্পোর্ট-একবার , যা নোড-স্যাসের সাথে কাজ করে (নোড.জেএস এর জন্য) সিএসএস ফাইলগুলি আমদানি করতে পারে।

প্রত্যক্ষ ব্যবহারের উদাহরণ:

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

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

গ্রান্ট-স্যাস কনফিগারেশনের উদাহরণ :

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"
      }
    }
  });

মনে রাখবেন যে নোড-স্যাস-ইম্পোর্ট-একবার বর্তমানে সুস্পষ্ট শীর্ষস্থানীয় আন্ডারস্কোর ব্যতীত সাস পার্টিয়ালগুলি আমদানি করতে পারে না। ফাইল সহ উদাহরণস্বরূপ partials/_partial.scss:

  • @import partials/_partial.scss সফল
  • @import * partials/partial.scss ব্যর্থ

সাধারণভাবে, সচেতন থাকুন যে কোনও কাস্টম আমদানিকারক কোনও আমদানি শব্দার্থবিজ্ঞান পরিবর্তন করতে পারে । আপনি ডকগুলি ব্যবহার শুরু করার আগে এটি পড়ুন।


4

আমি যদি সঠিক হয়ে থাকি তবে CSS CSS এর সাথে সামঞ্জস্যপূর্ণ যাতে আপনি CSS এর এক্সটেনশনটিকে এসএসএসে পরিবর্তন করতে পারেন এবং এটি কাজ চালিয়ে যাওয়া উচিত। একবার আপনি এক্সটেনশানটি পরিবর্তন করলে আপনি এটিকে আমদানি করতে পারবেন এবং এটি ফাইলের মধ্যে অন্তর্ভুক্ত হবে।

আপনি যদি তা না করেন তবে স্যাস সিএসএস @ ইম্পোর্ট ব্যবহার করবে যা আপনি চান না এমন কিছু।


16
দুর্ভাগ্যক্রমে কখনও কখনও আমদানি করা CSS ফাইলগুলি আপনার নিয়ন্ত্রণের বাইরে চলে যায়, যেমন একটি লাইব্রেরিতে যা কিছু স্থির সম্পদকে প্যাকেজ করে।
এরিক ড্রেচেল

2

এটি করার জন্য আমি একটি মার্জিত, রেলের মতো উপায় বের করেছি। প্রথমে আপনার .scssফাইলটির নাম পরিবর্তন করুন .scss.erb, তারপরে এই জাতীয় সিনট্যাক্স ব্যবহার করুন ( হাইলাইট_js-Rails4 রত্ন সিএসএস সম্পদের উদাহরণ হিসাবে ):

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

আপনি এসসিএসএসের মাধ্যমে ফাইলটি কেন সরাসরি হোস্ট করতে পারবেন না :

আপনি এসএসএসএস-এ কোনও @importকাজ করা ততক্ষণ সিএসএস ফাইলের জন্য সূক্ষ্মভাবে কাজ করে যতক্ষণ আপনি স্পষ্টভাবে পুরো পথটি এক বা অন্য কোনওভাবে ব্যবহার করেন। বিকাশ মোডে, rails sসম্পদগুলি সংকলন না করে পরিবেশন করে, তাই এর মতো পথটি ...

@import "highlight_js/github.css";

... কারণ হোস্ট করা পথটি আক্ষরিক /assets/highlight_js/github.css। আপনি যদি পৃষ্ঠায় ডান ক্লিক করেন এবং "উত্স দেখুন", তবে উপরের স্টাইলশিটের জন্য লিঙ্কটি ক্লিক করুন @import, আপনি সেখানে একটি লাইন দেখতে পাবেন যাতে দেখতে:

@import url(highlight_js/github.css);

এসসিএসএস ইঞ্জিনটি অনুবাদ "highlight_js/github.css"করে url(highlight_js/github.css)। সম্পত্তির পূর্বনির্ধারিত যেখানে ফাইলের নামের সাথে একটি হ্যাশ ইনজেকশন দেওয়া থাকে সেখানে প্রযোজনা চালানোর চেষ্টা করার সিদ্ধান্ত না নেওয়া পর্যন্ত এটি সাঁতার দিয়ে কাজ করবে। এসসিএসএস ফাইলটি এখনও এমন একটি স্ট্যাটিকের সমাধান করবে /assets/highlight_js/github.cssযা প্রাক্পম্পাইল করা হয়নি এবং উত্পাদনে বিদ্যমান নেই।

এই সমাধানটি কীভাবে কাজ করে:

প্রথমত, .scssফাইলটিতে স্থানান্তরিত করে .scss.erb, আমরা কার্যকরভাবে এসএসএসএসকে রিয়েলগুলির টেম্পলেটে পরিণত করেছি। এখন, যখনই আমরা <%= ... %>টেমপ্লেট ট্যাগগুলি ব্যবহার করি , তখন রেল টেম্পলেট প্রসেসর এই স্নিপেটগুলি কোডের আউটপুট (অন্য কোনও টেম্পলেটের মতো) সহ প্রতিস্থাপন করবে।

চিঠিতে asset_path("highlight_js/github")মধ্যে .scss.erbফাইল দুটি জিনিস আছে:

  1. rake assets:precompileযথাযথ সিএসএস ফাইলটি প্রাকপম্পাইল করার জন্য কার্যটি ট্রিগার করে ।
  2. একটি ইউআরএল তৈরি করে যা রেলের পরিবেশ নির্বিশেষে সম্পদটি যথাযথভাবে প্রতিফলিত করে।

এর অর্থ হ'ল এসসিএসএস ইঞ্জিন এমনকি সিএসএস ফাইলটিও পার্স করছে না; এটি কেবল এটির একটি লিঙ্ক হোস্টিং করছে! সুতরাং কোনও হকি বানর প্যাচ বা স্থূল কর্মক্ষেত্র নেই। আমরা এসএসএসএসের মাধ্যমে সিএসএস সম্পদটি ইচ্ছাকৃতভাবে পরিবেশন করছি এবং সিএসএস অ্যাসেটটিকে ব্যয় হিসাবে চিহ্নিত করতে একটি ইউআরএল ব্যবহার করছি। খুব সুন্দর!


আমার কাছে সমাধানটি কিছুটা ছায়াময় বলে মনে হচ্ছে এবং হ্যাকের মতো শোনাচ্ছে। তবে এটি তদন্তের একটি ভাল কাজ!
ফার্সাইড

0

সাধারণ কাজ

সমস্ত, বা প্রায় সমস্ত সিএসএস ফাইলকেও ব্যাখ্যা করা যেতে পারে যেন এটি স্কেস হবে। এটি তাদের একটি ব্লকের ভিতরে আমদানি করতে সক্ষম করে। সিএসএস-এর জন্য সিএসএসের নাম পরিবর্তন করুন, এবং এটি আমদানি করুন।

আমার প্রকৃত কনফিগারেশনে আমি নিম্নলিখিতগুলি করি:

প্রথমে আমি। এসএসএস ফাইলটি অস্থায়ী একটিতে অনুলিপি করেছিলাম, এবার এসএসএসএস এক্সটেনশান দিয়ে। গ্রান্ট উদাহরণ কনফিগার:

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...
}

দ্রষ্টব্য: এটি বিপজ্জনক হতে পারে, কারণ এটি কার্যকরভাবে ফলাফল করবে যে সিএসএস একাধিকবার পার্স করা হবে। আপনার মূল সিএসএসের জন্য এটি পরীক্ষা করুন এটিতে কোনও স্কেস-ব্যাখ্যামূলক আর্টিক্ট রয়েছে (এটি অসম্ভব, তবে যদি এটি হয় তবে ফলাফলটি ডিবাগ করা শক্ত এবং বিপজ্জনক হবে)।



-4

আমি এই কাজগুলি নিশ্চিত করতে পারি:

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

ক্রিস এপস্টেইনকে ক্রেডিট: https://github.com/sass/sass/issues/193


1
আপনি কীভাবে এটি আপনার এসএসএস ফাইলে ব্যবহার করতে পারেন?
অ্যাড্রিয়ান বার

-10

সহজ।

@ ইমপোর্ট "পথ / থেকে / file.css";


6
আমি এটি চেষ্টা করেছি, তবে এটি সংকুচিত করার সময় ফাইলের বিষয়বস্তুগুলিকে সেই একের মধ্যে টানতে দেবে না, এটি কেবল @ ইম্পোর্ট লাইনটি রাখবে।
জিএসটি

1
সর্বনিম্ন স্কোর করা উত্তর, তবে হাস্যকরভাবে, এটি এখন সঠিক পদ্ধতি বলে মনে হচ্ছে। প্রত্যয়টি অন্তর্ভুক্ত করা সঠিক জিনিস।
উইক
আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.