วิธีแทรกแบบอักษรใน CSS ด้วย webpack


10

พื้นหลังของปัญหา: ฉันใช้ katex เพื่อแสดงผลทางคณิตศาสตร์บางอย่างบนหน้าเว็บ จากนั้นฉันต้องการสร้างส่วน PDF ของหน้านั้นดังนั้นฉันจึงสร้างเอกสาร HTML ที่มีส่วนที่จะส่งออกที่อินไลน์ CSS ทั้งหมดและส่งต่อไปยัง renderer ตัวแสดงภาพไม่สามารถเข้าถึงทรัพยากรของโหนดได้นั่นคือสาเหตุที่ทุกอย่างถูกแทรกไว้ มันทำงานได้อย่างสมบูรณ์แบบยกเว้นแบบอักษร

ฉันลองทั้ง url-loader และ bas64-inline-loader แต่ฟอนต์ที่สร้างขึ้นไม่ได้ถูกแทรก ฉันตรวจสอบ CSS ที่สร้างขึ้นในดีบักเกอร์และ URL เก่ายังอยู่ในนั้นไม่มี data-URL สำหรับแบบอักษร

นี่คือ 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/.*'
        })
    ]
};

คำตอบ:


3

วิธีที่ดีที่สุดคือใช้ postcss-cli และ postcss-inline-base64

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/'
    },
  },
};

baseDir เป็นเส้นทางไปยังแบบอักษร ในไฟล์ scss ฉันเพิ่มแบบอักษรด้วยวิธีนี้:

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

จากผลงานเราได้แปลงฟอนต์เป็น base64 @font-face{font-family:Lato-Light;src:url("data:font/ttf;charset=utf-8;base64,...

UPDATE: ฉันเตรียมตัวอย่างเล็ก ๆ น้อย ๆpostcss-inline-base64


ขอบคุณมาก. ปัญหาของฉันคือไฟล์ katex.css ซึ่งรวม@font-faceคำสั่งนั้นอยู่ในโหนดโมดูล (katex) ฉันไม่ได้อ้างอิงแบบอักษรใด ๆ เหล่านี้ในไฟล์ css ของฉันเอง ฉันกำลังมองหาวิธีที่จะแทนที่ URL ได้ทันทีเมื่อ webpack ทำงาน ตามที่ฉันเข้าใจฉันจะต้องเปลี่ยน@font-faceข้อความเป็น katex.css หากฉันต้องการใช้โซลูชันของคุณ
Axel

ใช่คุณไม่สามารถลองปลั๊กอินอื่นpostcss-base64ได้ฉันไม่ได้ใช้อันนี้ แต่จากสิ่งที่ฉันได้อ่านในเอกสารคุณสามารถเลือกส่วนขยายเพื่อให้ทำงานได้ จากนั้นคุณจะไม่ต้องแก้ไขไฟล์ ฉันจะทดสอบว่าฉันหาเวลาสักครู่
Grzegorz T.

ตกลงปลั๊กอินที่ฉันแนะนำไม่ทำงานตามที่ฉันต้องการ แต่อันนี้คุณจะไม่ต้องเปลี่ยนแปลงอะไรในไฟล์แบบอักษรทั้งหมดจะถูกเปลี่ยนเป็นpostcss-font-base64โดยอัตโนมัติ- ตัวอย่างการ
Grzegorz T.
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.