CSS में webpack के साथ इनलाइन फोंट कैसे?

Question

समस्या पृष्ठभूमि: मैं किसी पृष्ठ पर कुछ गणित प्रस्तुत करने के लिए katex का उपयोग कर रहा हूं। मैं तब उस पृष्ठ के हिस्से का एक पीडीएफ संस्करण बनाना चाहता हूं, इसलिए मैं एक HTML दस्तावेज़ बनाता हूं जिसमें उस हिस्से को निर्यात किया जाए जो सभी सीएसएस को रेखांकित करता है और इसे रेंडरर को पास करता है। रेंडरर नोड संसाधनों का उपयोग नहीं कर सकता है, इसीलिए सब कुछ इनबिल्ट है। यह फोंट को छोड़कर पूरी तरह से काम करता है।

मैंने url-loader और bas64- इनलाइन-लोडर दोनों की कोशिश की, लेकिन उत्पन्न फोंट इनबिल्ड नहीं हैं। मैंने डिबगर में उत्पन्न सीएसएस का निरीक्षण किया, और पुराने यूआरएल अभी भी हैं, फोंट के लिए कोई डेटा-यूआरएल नहीं है।

यह मेरा वर्तमान webpack.config.js है:

const path = require('path');
const {CleanWebpackPlugin} = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    mode: 'development',
    entry: {
        "editor": './src/editor.js',
        "editor.worker": 'monaco-editor/esm/vs/editor/editor.worker.js',
        "json.worker": 'monaco-editor/esm/vs/language/json/json.worker',
        "css.worker": 'monaco-editor/esm/vs/language/css/css.worker',
        "html.worker": 'monaco-editor/esm/vs/language/html/html.worker',
        "ts.worker": 'monaco-editor/esm/vs/language/typescript/ts.worker',
    },
    output: {
        globalObject: 'self',
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            {
                test: /\.(woff|woff2|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
                use: ['url-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            filename: 'editor_text.html',
            template: 'src/editor_text.html'
        }),
        new HtmlWebpackPlugin({
            filename: 'editor_markdown.html',
            template: 'src/editor_markdown.html',
            inlineSource: '/katex/.*'
        })
    ]
};

Answer 1

सबसे अच्छा तरीका पोस्टक्सेस-क्ली और पोस्टक्सेस-इनलाइन-बेस 64 का उपयोग करना है

webpack:

{
  test: /\.(css|sass|scss)$/,
  use: [
    MiniCssExtractPlugin.loader,
    {
      loader: 'css-loader',
      options: {
        importLoaders: 2,
        sourceMap: true
      },
    },
    {
      loader: 'postcss-loader', // important
      options: {
        sourceMap: true,
        config: {
          path: './config/',
        },
      },
    },
    {
      loader: 'sass-loader',
      options: {
        sourceMap: true,
      },
    },
  ],
}, {
  test: /\.(woff(2)?|ttf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
  use: [{
    loader: 'file-loader',
  }]
},

कॉन्फिग फोल्डर चौड़ाई postcss.config.js बनाएं

module.exports = {
  plugins: {
    'postcss-inline-base64': {
      baseDir: './sources/'
    },
  },
};

बेसडिर फोंट का रास्ता है। Scss फ़ाइल में मैं इस तरह से एक फ़ॉन्ट जोड़ता हूँ:

@font-face {
  font-family: 'Lato-Light';
  src: url('b64---../fonts/Lato-Light.ttf---') format('truetype');
  font-weight: normal;
  font-style: normal;
}

काम के परिणामस्वरूप हमारे पास बेस 64 में एक अच्छी तरह से परिवर्तित फ़ॉन्ट है @font-face{font-family:Lato-Light;src:url("data:font/ttf;charset=utf-8;base64,...

अद्यतन: मैंने एक छोटा सा उदाहरण पोस्ट-इनलाइन-बेस 64 तैयार किया

Comments

बहुत बहुत धन्यवाद। मेरी समस्या यह है कि katex.css फ़ाइल जिसमें @font-faceस्टेटमेंट्स शामिल हैं, एक नोड मॉड्यूल (katex) के अंदर है। मैं अपनी स्वयं की सीएसएस फाइलों में इनमें से किसी भी फोंट का संदर्भ नहीं देता। जब मैं वेबपैक चलाता हूं तो मैं मक्खी पर यूआरएल को बदलने का एक तरीका ढूंढ रहा हूं। जैसा कि मैं इसे समझता हूं, @font-faceअगर मुझे आपके समाधान का उपयोग करना है तो मुझे katex.css में स्टेटमेंट बदलना होगा ।

— एक्सल

हाँ, आप एक और प्लगइन पोस्ट-बेस -64 का प्रयास नहीं कर सकते हैं, मैंने इसका उपयोग नहीं किया है, लेकिन मैंने प्रलेखन में जो पढ़ा है उससे आप एक्सटेंशन का चयन कर सकते हैं, इसलिए इसे काम करना चाहिए। तब आपको फ़ाइलों को संशोधित नहीं करना पड़ेगा। अगर मुझे समय का पता चलता है तो मैं परीक्षण करूंगा।

— टी।

ठीक है, जो मैंने सुझाव दिया है कि वह काम नहीं करता जैसा मैं चाहता था, लेकिन यह एक आपको फाइलों में कुछ भी बदलना नहीं होगा, सभी फोंट स्वचालित रूप से पोस्ट-फॉल्स-बेस -64 में बदल जाएंगे -> अद्यतन उदाहरण

— टी।