मैं वेबपैक्स में SCSS (SASS) का उपयोग करके रिश्तेदार पथों का उपयोग करके फ़ॉन्ट-भयानक कैसे लोड कर सकता हूं?

Question 1

मेरे नोड_मॉडल फ़ोल्डर में मेरे पास फ़ॉन्ट-कमाल है इसलिए मैं इसे अपने मुख्य .scss फ़ाइल में आयात करने का प्रयास करता हूं:

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

लेकिन वेबपैक बंडलिंग संकलन विफल रहता है, मुझे बता रहा है

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

क्योंकि फॉन्ट-भयानक.scss फाइल एक रिश्तेदार पथ को संदर्भित करता है, '../fonts/'।

मैं किसी अन्य फ़ाइल के लिए scss \ webpack को कैसे बता सकता हूं, और उस फ़ाइल के फ़ोल्डर को होम फ़ोल्डर के रूप में उपयोग कर सकता हूं ताकि उसके रिश्तेदार पथ काम करें जैसे कि यह उम्मीद करता है?

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

SCIM \ SASS में अपने स्वयं के सापेक्ष पथ वाले @import फ़ाइलों के लिए कोई भी रास्ता दिखाई नहीं देता है।

इसलिए इसके बजाय मैं यह काम करने में कामयाब रहा :

मेरे .js या .jsx फ़ाइलों में scss \ css फ़ॉन्ट-भयानक फ़ाइल आयात करें, न कि मेरी स्टाइलशीट फ़ाइलें:
```
आयात 'फ़ॉन्ट-भयानक / scss / फ़ॉन्ट-भयानक.scss';    
```
इसे मेरे webpack.config फ़ाइल में जोड़ें:

    मापांक:
    {
        लोडर:
        [
            {test: /\.js?$/, लोडर: 'babel-loader? cacheDirectory', बाहर करें: / (node_modules | bower_compenders) /}
            {test: /\.jsx?$/, लोडर: 'babel-loader? cacheDirectory', बाहर करें: / (node_modules | bower_compenders) /}
            {test: /\.scss?$/, लोडर: ['स्टाइल-लोडर', 'सीएसएस-लोडर', 'सैस-लोडर']},         
            {test: /\.svg(\?v=\d+\.\d+\.\d+)?$/, loader: 'file-loader? mimetype = image / svg + xml'}?
            {test: /\.woff(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader? mimetype = application / font-woff"},?
            {test: /\.woff2(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader? mimetype = application / font-woff"}?
            {test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/, loader: "file-loader? mimetype = application / octet-stream"},?
            {test: /\.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

मैंने अपनी मुख्य scss फ़ाइल में पथ सेट किया है और यह काम करता है:

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

Question 7

यह मेरे लिए कैसे काम करता है, इस ट्रिक `$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 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-3013184-4

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';

मैं वेबपैक्स में SCSS (SASS) का उपयोग करके रिश्तेदार पथों का उपयोग करके फ़ॉन्ट-भयानक कैसे लोड कर सकता हूं?

यह मेरे लिए कैसे काम करता है, इस ट्रिक $fa-font-pathको निम्नानुसार फोंट के पथ पर सेट करना है।

यह मेरे लिए कैसे काम करता है, इस ट्रिक `$fa-font-path`को निम्नानुसार फोंट के पथ पर सेट करना है।