Question

我一直试图解决这一问题，并且在线搜索了每个解决方案，但似乎找不到任何解决方案。

我的Webpack

    const path = require('path')
    const ExtractTextPlugin = require('extract-text-webpack-plugin')
    const CopyWebpackPlugin = require('copy-webpack-plugin')

    module.exports = {
        entry: './src/scripts/index.js',
        output: {
            path: path.resolve(__dirname, '../build'),
            publicPath: path.resolve(__dirname, '../build'),
            filename: 'bundle.js',
        },
        module: {
            rules: [{
                test: /\.js$/,
                exclude: /node_modules/,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        presets: ['env'],
                        plugins: [
                            ['transform-class-properties'],
                            ['transform-object-rest-spread'],
                        ],
                    },
                }, {
                    loader: 'eslint-loader'
                }]
            }, {
                test: /\.(png|jpg|gif|json|mp4|ico)$/,
                use: [{
                    loader: 'file-loader',
                    options: {
                        name: './assets/[name].[ext]',
                    },
                }, ],
            }, {
                test: /\.(scss|css)$/,
                use:ExtractTextPlugin.extract({
                    fallback:'style-loader',
                    use: ['css-loader','sass-loader']
                }),
            },{
                test: /\.(woff(2)?|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
                loader: "file-loader",
                options: {
                    limit: 10000,
                    name: './assets/fonts/[name].[ext]',
                    mimetype: 'application/octet-stream'
                }
            }, ],
        },
        plugins: [
            new ExtractTextPlugin({
                filename: 'style.css',
            }),
            new CopyWebpackPlugin(
                [{
                    from: './src',
                    to: './',
                    force: true,
                }, ], {
                    ignore: ['*.js', '*.css', '.DS_Store'],
                },
            ),
        ],
    }

我在index.js中有一个导入的main.scss，然后在main.scss中有一个font.scss，它在下面

    $base-fonts-path  : '/assets/fonts';



    @font-face {
      font-family: 'cardowalsheim';
      src: url('#{$base-fonts-path}/GTWalsheimProThin.eot'); /* IE9 Compat Modes */
      src: url('#{$base-fonts-path}/GTWalsheimProThin.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('#{$base-fonts-path}/GTWalsheimProThin.woff') format('woff'), /* Modern Browsers */
           url('#{$base-fonts-path}/GTWalsheimProThin.ttf')  format('truetype'), /* Safari, Android, iOS */
           url('#{$base-fonts-path}/GTWalsheimProThin.svg#114f83b1372052e00fe6210ffd8e061d') format('svg'); /* Legacy iOS */

      font-style:   normal;
      font-weight:  200;
    }

似乎加载了字体，但是会自动变成HTML类型。任何帮助将不胜感激。

Webpack 3-@ font-face无法正确加载字体

0 个答案: