Question

直接解决问题...

lib.js代码

import DemoModule from './DemoModule.jsx';
import './styles/fonts/fonts.scss';
import './styles/styles.scss';

module.exports = {
    DemoModule: DemoModule,
};

Fonts.scss

@font-face {
    font-family: 'Demo font';
    src: url('./demo-font.otf') format('opentype');
    font-weight: 300;
}

Webpack代码

module.exports = {
    entry: './src/lib.js',
    target: 'node',
    output: {
        filename: 'index.js',
        path: './lib/',
        library: "libName",
        libraryTarget: 'commonjs2',
    },
    plugins: [
        ***
    ],
    module: {
        loaders: [
            { test: /\.js$/, loader: 'babel-loader' },
            { test: /\.jsx$/, loader: 'babel-loader' },
            { test: /\.json$/, loader: 'json' },
            { test: /\.scss$/, loaders: ['style', 'css', 'sass'] },
            { test: /\.png$/, loader: 'url-loader' },
            { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" },
            { test: /\.[ot]tf?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: 'url-loader?limit=10000&mimetype=application/octet-stream' },
            { test: /\.(eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" }
        ]
    }
};

当我运行 npm run build 时，此命令会编译lib目录中的所有内容，创建index.js并在该目录中移动demo-font.ots。

Direcotry看起来像那样

/lib
    index.js
    demo-font.ots

但是当我在其他项目中使用来自 node_modules 的这个软件包时，它会查找像这样的字体www.abc.com/demo-font.ots并且它缺失了。一切正常，即使是css也可以，除了无法加载字体。

我在此配置中缺少什么？

Answer 1

您的SCSS文件编译为：

 src: url('./demo-font.otf') format('opentype');

所以你要告诉它查看当前工作目录中的demo-font.otf

如果期望字体位于域的根目录中，那么这应该可行，但是，如果您的字体位于其他位置（例如在styles / fonts目录中），那么您将找不到404。< / p>

转到开发人员工具（我使用Chrome，因此它是Ctrl + Shift + J）并检查您的网络应用程序预期字体的位置。另外＆＃34;查看来源＆＃34;检查一下，然后修复其他项目中的相关内容

使用webpack构建节点包时出现字体src的问题

1 个答案: