ওয়েবপ্যাক দিয়ে সিএসএসে ফন্টগুলি কীভাবে ইনলাইন করবেন?

Question

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

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

এটি আমার বর্তমান ওয়েবপ্যাক.কনফিগ.জেএস:

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

আপডেট: আমি একটি ছোট উদাহরণ postcss- ইনলাইন-বেস 64 প্রস্তুত

Comments

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

— এক্সেল

হ্যাঁ আপনি অন্য একটি প্লাগইন পোস্টকএসএস-বেস 64 টি বেশ চেষ্টা করতে পারবেন না আমি এটি ব্যবহার করি নি তবে ডকুমেন্টেশনে যা পড়েছি তা থেকে আপনি এক্সটেনশনটি বেছে নিতে পারেন যাতে এটি কাজ করা উচিত। তারপরে আপনাকে ফাইলগুলি পরিবর্তন করতে হবে না। আমি যদি একটি মুহুর্ত খুঁজে পাই তবে আমি পরীক্ষা করব।

— গ্রজেগোর্জ টি।

ঠিক আছে প্লাগইন যা আমি প্রস্তাব কাজ নাও আমি চেয়েছিলাম, কিন্তু এই এক আপনি ফাইল পরিবর্তন কিছু করতে হবে না, সব ফন্ট স্বয়ংক্রিয়ভাবে পরিবর্তন করা হবে postcss-ফন্ট-করুন Base64- -> আপডেটের উদাহরণ

— Grzegorz টি