আপেক্ষিক পথগুলি ব্যবহার করে কীভাবে আমি ওয়েবপ্যাকে এসএসএসএস (এসএএসএস) ব্যবহার করে ফন্ট-দুর্দান্তটি লোড করব?

Question 1

আমার নোড_মডিউলগুলি ফোল্ডারে ফন্ট-দুর্দান্ত রয়েছে তাই আমি এটির মতো আমার মূল এসএসএস ফাইলটিতে আমদানির চেষ্টা করব:

@import "../../node_modules/font-awesome/scss/font-awesome.scss";

তবে ওয়েবপ্যাক বান্ডিলিং সংকলন ব্যর্থ হয়েছে, আমাকে বলছেন

Error: Cannot resolve 'file' or 'directory' ../fonts/fontawesome-webfont.eot

কারণ হরফ-অসাধারণ.এসএসএস ফাইলটি একটি আপেক্ষিক পাথকে বোঝায়, '../fonts/'।

আমি কীভাবে scss \ ওয়েবপ্যাকটি অন্য একটি ফাইলকে আমদানি করতে বলতে পারি এবং সেই ফাইলটির ফোল্ডারটিকে হোম ফোল্ডার হিসাবে ব্যবহার করতে পারি যাতে এটির প্রত্যাশার সাথে সম্পর্কিত পাথগুলি কাজ করে?

Question 2

ব্যবহার

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

যেখানে $fa-font-pathপরিবর্তনশীল দেখা যায়font-awesome/scss/_variables.scss

$fa-font-path: "../fonts" !default;

টিল্ড "~" ওয়েবপ্যাক মেকানিজম ব্যবহার করে সাস-লোডার দ্বারা সংযুক্ত করা হয়েছে ।

Question 3

এসসিএসএস \ এসএএসএস-এ নিজস্ব আপেক্ষিক পাথ রয়েছে এমন ইমপোর্ট ফাইলগুলির কোনও উপায় নেই বলে মনে হয়।

সুতরাং পরিবর্তে আমি পেতে পরিচালিত এই কাজের জন্য:

আমদানি করুন আমার .js বা .jsx ফাইল, মধ্যে SCSS \ CSS ফন্ট-সন্ত্রস্ত ফাইল না আমার স্টাইলশীট ফাইলগুলি:
```
আমদানি করুন 'ফন্ট-অসাধারণ / এসএসএস / ফন্ট-অসাধারণ.এসএসএস';    
```
এটি আমার ওয়েবপ্যাক.কনফিগ ফাইলটিতে যুক্ত করুন:

    মডিউল:
    {
        লোডার:
        [
            {পরীক্ষা: /\.js?$/, লোডার: 'বাবেল-লোডার? ক্যাশে ডিরেক্টরি', বাদ দিন: / (নোড_মডিউলস | বোভার_কম্পোন্টস) /},
            {পরীক্ষা: /\.jsx?$/, লোডার: 'বাবেল-লোডার? ক্যাশে ডিরেক্টরি', বাদ: / (নোড_মডিউলস | বোভার_কম্পোন্টস) /},
            {পরীক্ষা: /\.scss?$/, লোডার: ['স্টাইল-লোডার', 'সিএসএস-লোডার', 'সাস-লোডার']},         
            {পরীক্ষা: /\.svg(\?v=\d+\.\d+\.\d+)?$/, লোডার: 'ফাইল-লোডার? মিমিটাইপ = চিত্র / এসভিজি + এক্সএমএল'},
            {পরীক্ষা: /\.woff(\?v=\d+\.\d+\.\d+)?$/, লোডার: "ফাইল-লোডার? মিমিটাইপ = অ্যাপ্লিকেশন / ফন্ট-ওফ"},
            {পরীক্ষা: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, লোডার: "ফাইল-লোডার? মিমিটাইপ = অ্যাপ্লিকেশন / ফন্ট-ওফ"},
            {পরীক্ষা: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, লোডার: "ফাইল-লোডার? মিমিটাইপ = অ্যাপ্লিকেশন / অকটেট-স্ট্রিম"},
            {পরীক্ষা: /\.eot(\?v=\d+\.\d+\.\d+)?$/, লোডার: "ফাইল-লোডার"},
        ]
    }

Question 4

নিম্নলিখিত আমার জন্য কাজ করেছে:

$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";

এটি font-awesomeপ্রকল্পে & প্রয়োজনীয় ফন্টগুলি আমদানি করার জন্য । অন্যান্য পরিবর্তনগুলি webpackকনফিগারেশনে রয়েছে, প্রয়োজনীয় ফন্টগুলি ব্যবহার করে লোড করতে file-loader।

{
  test: /\.scss$/,
  loaders: ['style', 'css?sourceMap', 'sass'
  ],
}, {
  test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)(\?.*$|$)/,
  loader: 'file'
}

Question 5

আমার পরিবর্তন করে সমাধান করা app.scss:

@import '~font-awesome/scss/_variables.scss';
$fa-font-path: "~font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

বাহ্যিক নির্ভরতা অপরিবর্তিত এবং রূপান্তরিত রাখতে এই উপায়টি কার্যকর।

Question 6

এইভাবে এটি আমার পক্ষে কাজ করেছিল, কৌশলটি হ'ল $fa-font-pathফন্টগুলির পথে অনুসরণ করা হবে।

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts/";
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';

দ্রষ্টব্য : দয়া করে আপনার ফন্ট ফোল্ডারটি node_modulesআমার ক্ষেত্রে এটি পরীক্ষা করুন@fortawesome/fontawesome-free

Question 7

আমি স্রেফ আমার মূল স্ক্যাস ফাইলটিতে পথ নির্ধারণ করেছি এবং এটি কাজ করে:

$fa-font-path: "../node_modules/font-awesome/fonts";
@import '~font-awesome/scss/font-awesome.scss';

Question 8

আমার জন্য যা কাজ করেছিল তা হ'ল যুক্ত করা resolve-url-loaderএবং সক্ষম করাsourceMaps

আমি আমার রুট .scssফাইলে ইতিমধ্যে ফন্ট-সন্ত্রস্ত আমদানি করেছি :

@import "~font-awesome/scss/font-awesome";
...

এই রুট ফাইলটি main.jsওয়েবপ্যাকের এন্ট্রিপয়েন্ট হিসাবে সংজ্ঞায়িত আমার ফাইলে আমদানি করা হয়েছে :

import './scss/main.scss';
...

তারপরে আমার চূড়ান্ত ওয়েবপ্যাক মডিউল নিয়মগুলি দেখতে এরকম দেখাচ্ছে:

 ...
 {
    test: /\.(sa|sc|c)ss$/,
    use: [
      MiniCssExtractPlugin.loader,
      'css-loader',
      { loader: 'postcss-loader', options: { sourceMap: true }, },
      'resolve-url-loader',
      { loader: 'sass-loader', options: { sourceMap: true }, },
    ],
  }, {
    test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
    loader: 'url-loader',
    options: { limit: 1000, name: 'fonts/[name].[ext]', },
  }
  ...

বিঃদ্রঃ:

আমি ব্যবহার করেছি mini-css-extract-plugin, যা এভাবে নিবন্ধিত হতে পারে:

new MiniCssExtractPlugin({
    filename: 'css/main.css',
    chunkFilename: '[id].[hash]',
}),

url-loaderfile-loaderইনস্টল করা প্রয়োজন , সুতরাং আপনি যদি এর মতো কোনও ত্রুটি পান: cannot find module file-loaderতবে কেবল এটি ইনস্টল করুন:

npm i -D file-loader

দরকারী লিঙ্ক :

https://github.com/webpack/webpack/issues/2771#issuecomment-277514138 https://github.com/rails/webpacker/issues/384#issuecomment-301318904

Question 9

সংস্করণ 5.14 এর জন্য, নিম্নলিখিতগুলি আমার জন্য কাজ করেছে:

$fa-font-path : '../node_modules/@fortawesome/fontawesome-free/webfonts';

@import "../node_modules/@fortawesome/fontawesome-free/scss/solid";

@import "../node_modules/@fortawesome/fontawesome-free/scss/brands";

@import "../node_modules/@fortawesome/fontawesome-free/scss/fontawesome";

Question 10

v.4 (সিমোফনি 4 + ওয়েবপ্যাক)

$fa-font-path: "~components-font-awesome/webfonts";
@import '~components-font-awesome/scss/fa-brands';
@import '~components-font-awesome/scss/fa-regular';
@import '~components-font-awesome/scss/fa-solid';
@import '~components-font-awesome/scss/fontawesome';