Fatal编程技术网

Javascript 无法渲染字体

javascript reactjs webpack

Javascript 无法渲染字体,javascript,reactjs,webpack,webfonts,Javascript,Reactjs,Webpack,Webfonts,在我的react应用程序中，我有一个构建目录，其中包含为应用程序提供服务所需的所有文件。在build目录中，我有应该渲染的字体。但是字体不会被渲染 这就是我的生成文件夹的外观 这是我的font.styl，位于src>client>container>App>font.styl中 @font-face font-family 'museo_sans700' src url('/public/fonts/museosans_0-webfont.woff2') format('wof

在我的react应用程序中，我有一个构建目录，其中包含为应用程序提供服务所需的所有文件。在build目录中，我有应该渲染的字体。但是字体不会被渲染

这就是我的生成文件夹的外观

这是我的font.styl，位于src>client>container>App>font.styl中

@font-face
    font-family 'museo_sans700'
    src url('/public/fonts/museosans_0-webfont.woff2') format('woff2')
        url('/public/fonts/museosans_0-webfont.woff') format('woff')
    font-weight normal
    font-style normal

@font-face
    font-family 'museo_sans300'
    src url('/public/fonts/museosans-300-webfont.woff2') format('woff2')
        url('/public/fonts/museosans-300-webfont.woff') format('woff')
    font-weight normal
    font-style normal

@font-face
    font-family 'museo_sans500'
    src url('/public/fonts/museosans-webfont.woff2') format('woff2')
        url('/public/fonts/museosans-webfont.woff') format('woff')
    font-weight normal
    font-style normal

@font-face
    font-family 'montserratregular'
    src url('/public/fonts/montserrat-regular-webfont.woff2') format('woff2')
        url('/public/fonts/montserrat-regular-webfont.woff') format('woff')
    font-weight normal
    font-style normal
这是我的server.config和client.config文件

Client.config.js

 var path = require('path');
    var webpack = require('webpack');

var DIRS = require('./dirs.js');

var stylus = require('stylus');
var nib = require('nib');
var axis = require('axis');
var rupture = require('rupture');
var bootstrap = require('bootstrap-styl');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var IS_PROD = process.env.NODE_ENV === "production";
var config = {
    devtool: IS_PROD ? false : 'eval',
    debug: !IS_PROD,
    cache: true,
    root: DIRS.ROOT,
    watchOptions: {
        ignored: /node_modules/
    },
    entry: {
        main: [ DIRS.SRC_CLIENT + '/index.js' ]
    },
    output: {
        path: DIRS.BUILD_PUBLIC,
        publicPath: '/public/',
        filename: '[name]-bundle.js'
    },
    resolve: {
        modulesDirectories: [ DIRS.SRC_CLIENT, 'node_modules'],
        extensions: ['', '.webpack.js', '.web.js', '.js', '.styl', '.css'],
    },
    module: {
        loaders: [
            {test: /\.json$/, loader: 'json', exclude: /node_modules/},
            {test: /\.js$/, 
                loader: 'babel', 
                exclude: /node_modules/,
                include: [ DIRS.SRC_CLIENT ],
                query: {
                    cacheDirectory: true,
                    env: { 
                        development: {
                            presets: ['react-hmre']
                        }
                    } 
                }
            },
            {
                test: /\.styl$/, 
                loader: [ 
                    'isomorphic-style-loader',
                    'css?sourceMap&localIdentName=[name]_[local]_[hash:base64:3]',
                    'stylus?sourceMap'
                ].join('!')
            },
            {
                test: /\.html$/,
                loader: 'html-loader?attrs[]=video:src'
            }, {
                test: /\.mp4$/,
                loader: 'url?limit=10000&mimetype=video/mp4'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader'
            },{
                test: /\.(png|jpg|jpeg|gif)$/,
                loader: 'url-loader',
                query: {
                  name: IS_PROD ? '[hash].[ext]' : '[path][name].[ext]?[hash]',
                  limit: 10000,
                }
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            __DEV__: !IS_PROD,
            __SERVER__: false,
            "process.env.NODE_ENV": (IS_PROD ? JSON.stringify("production") : JSON.stringify("development"))
        }),
        new webpack.ProvidePlugin({
            React: 'react'
        }),
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/)
    ],
    stylus: {
        use: [nib(), axis(), rupture(), bootstrap()],
        import: path.resolve(__dirname, '../src/stylus/index.styl'),
        error: IS_PROD,
        compress: IS_PROD,
        'include css': true
    }
};

if (IS_PROD){
    // console.log('--- CLIENT:PRODUCTION_MODE ---');
    config.entry.vendors = [
        'react', 'react-dom', 'react-router',
        'lodash', 'core-js', 'moment', 'jquery', 'bluebird',
        'redux', 'react-redux', 'react-router-redux',
        'history'
    ];

    config.plugins = config.plugins.concat([  
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors',
            filename: 'vendors-bundle.js'
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {warnings: false},
            comments: false
        }),
        new webpack.optimize.AggressiveMergingPlugin(),
    ]);
} else {
    config.entry.main.unshift('webpack-hot-middleware/client')
    config.plugins = config.plugins.concat([
        new webpack.DllReferencePlugin({
            context: DIRS.SRC_CLIENT,
            manifest: require(DIRS.BUILD_PUBLIC + '/dll/vendor-manifest.json')
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]);
}


module.exports = config;

var webpack = require('webpack');
var path = require('path');
var nodeExternals = require('webpack-node-externals');

var stylus = require('stylus');
var nib = require('nib');
var axis = require('axis');
var rupture = require('rupture');
var bootstrap = require('bootstrap-styl');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var DIRS = require('./dirs.js');
var IS_PROD = (process.env.NODE_ENV === "production");

var config = {
    target: 'node',
    devtool: IS_PROD ? false : '#inline-source-map',
    debug: !IS_PROD,
    cache: !IS_PROD,
    stats: {
        colors: true,
        chunks: false,
        reasons: true
    },
    externals: [nodeExternals()],
    node: {
        console: false,
        global: false,
        process: false,
        Buffer: false,
        __filename: false,
        __dirname: false
    },
    entry: {
        main: [ DIRS.SRC_SERVER + '/app.js' ],
    },
    output: {
        path: DIRS.BUILD,
        filename: 'server-bundle.js'
    },
    resolve: {
        modulesDirectories: [ DIRS.SRC_SERVER, DIRS.SRC_CLIENT, 'node_modules'],
        extensions: ['', '.webpack.js', '.web.js', '.js'],
    },
    module: {
        loaders: [
            {
                test: /\.js$/, 
                loader: 'babel', 
                exclude: /node_modules/,
                query: {
                    retainLines: true
                }
            },
            {test: /\.json$/, loader: 'json'},
            {
                test: /\.styl$/, 
                loader: [
                    'isomorphic-style-loader',
                    'css?localIdentName=[name]_[local]_[hash:base64:3]',
                    'stylus'
                ].join('!')
            },
            {
                test: /\.css$/,
                loader: 'isomorphic-style-loader!css-loader'
            },
            {
                test: /\.html$/,
                loader: 'html-loader?attrs[]=video:src'
            }, {
                test: /\.mp4$/,
                loader: 'url?limit=10000&mimetype=video/mp4'
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader'
            },{
                test: /\.(png|jpg|jpeg|gif)$/,
                loader: 'url-loader',
                query: {
                  name: IS_PROD ? '[hash].[ext]' : '[path][name].[ext]?[hash]',
                  limit: 10000,
                }
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            __DEV__: !IS_PROD,
            __SERVER__: true,
            "process.env.NODE_ENV": (IS_PROD ? JSON.stringify("production") : JSON.stringify("development"))
        }),
        new webpack.ProvidePlugin({
            React: 'react',
            _: 'lodash'
        }),
        new webpack.BannerPlugin('require("source-map-support").install();',{
            raw: true, entryOnly: false
        })
    ],
    stylus: {
        use: [nib(), axis(), rupture(), bootstrap()],
        import: path.resolve(__dirname, '../src/stylus/index.styl'),
        error: IS_PROD,
        compress: IS_PROD
    }
};

if (IS_PROD){
    // console.log('--- SERVER:PRODUCTION_MODE ---');
    config.plugins = config.plugins.concat([  
        new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}),
        new webpack.optimize.AggressiveMergingPlugin()
    ]);
}

module.exports = config;
server.config.js

 var path = require('path');
    var webpack = require('webpack');

var DIRS = require('./dirs.js');

var stylus = require('stylus');
var nib = require('nib');
var axis = require('axis');
var rupture = require('rupture');
var bootstrap = require('bootstrap-styl');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var IS_PROD = process.env.NODE_ENV === "production";
var config = {
    devtool: IS_PROD ? false : 'eval',
    debug: !IS_PROD,
    cache: true,
    root: DIRS.ROOT,
    watchOptions: {
        ignored: /node_modules/
    },
    entry: {
        main: [ DIRS.SRC_CLIENT + '/index.js' ]
    },
    output: {
        path: DIRS.BUILD_PUBLIC,
        publicPath: '/public/',
        filename: '[name]-bundle.js'
    },
    resolve: {
        modulesDirectories: [ DIRS.SRC_CLIENT, 'node_modules'],
        extensions: ['', '.webpack.js', '.web.js', '.js', '.styl', '.css'],
    },
    module: {
        loaders: [
            {test: /\.json$/, loader: 'json', exclude: /node_modules/},
            {test: /\.js$/, 
                loader: 'babel', 
                exclude: /node_modules/,
                include: [ DIRS.SRC_CLIENT ],
                query: {
                    cacheDirectory: true,
                    env: { 
                        development: {
                            presets: ['react-hmre']
                        }
                    } 
                }
            },
            {
                test: /\.styl$/, 
                loader: [ 
                    'isomorphic-style-loader',
                    'css?sourceMap&localIdentName=[name]_[local]_[hash:base64:3]',
                    'stylus?sourceMap'
                ].join('!')
            },
            {
                test: /\.html$/,
                loader: 'html-loader?attrs[]=video:src'
            }, {
                test: /\.mp4$/,
                loader: 'url?limit=10000&mimetype=video/mp4'
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader'
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader'
            },{
                test: /\.(png|jpg|jpeg|gif)$/,
                loader: 'url-loader',
                query: {
                  name: IS_PROD ? '[hash].[ext]' : '[path][name].[ext]?[hash]',
                  limit: 10000,
                }
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            __DEV__: !IS_PROD,
            __SERVER__: false,
            "process.env.NODE_ENV": (IS_PROD ? JSON.stringify("production") : JSON.stringify("development"))
        }),
        new webpack.ProvidePlugin({
            React: 'react'
        }),
        new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en/)
    ],
    stylus: {
        use: [nib(), axis(), rupture(), bootstrap()],
        import: path.resolve(__dirname, '../src/stylus/index.styl'),
        error: IS_PROD,
        compress: IS_PROD,
        'include css': true
    }
};

if (IS_PROD){
    // console.log('--- CLIENT:PRODUCTION_MODE ---');
    config.entry.vendors = [
        'react', 'react-dom', 'react-router',
        'lodash', 'core-js', 'moment', 'jquery', 'bluebird',
        'redux', 'react-redux', 'react-router-redux',
        'history'
    ];

    config.plugins = config.plugins.concat([  
        new webpack.optimize.CommonsChunkPlugin({
            name: 'vendors',
            filename: 'vendors-bundle.js'
        }),
        new webpack.optimize.UglifyJsPlugin({
            compress: {warnings: false},
            comments: false
        }),
        new webpack.optimize.AggressiveMergingPlugin(),
    ]);
} else {
    config.entry.main.unshift('webpack-hot-middleware/client')
    config.plugins = config.plugins.concat([
        new webpack.DllReferencePlugin({
            context: DIRS.SRC_CLIENT,
            manifest: require(DIRS.BUILD_PUBLIC + '/dll/vendor-manifest.json')
        }),
        new webpack.HotModuleReplacementPlugin(),
        new webpack.NoErrorsPlugin()
    ]);
}


module.exports = config;

var webpack = require('webpack');
var path = require('path');
var nodeExternals = require('webpack-node-externals');

var stylus = require('stylus');
var nib = require('nib');
var axis = require('axis');
var rupture = require('rupture');
var bootstrap = require('bootstrap-styl');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

var DIRS = require('./dirs.js');
var IS_PROD = (process.env.NODE_ENV === "production");

var config = {
    target: 'node',
    devtool: IS_PROD ? false : '#inline-source-map',
    debug: !IS_PROD,
    cache: !IS_PROD,
    stats: {
        colors: true,
        chunks: false,
        reasons: true
    },
    externals: [nodeExternals()],
    node: {
        console: false,
        global: false,
        process: false,
        Buffer: false,
        __filename: false,
        __dirname: false
    },
    entry: {
        main: [ DIRS.SRC_SERVER + '/app.js' ],
    },
    output: {
        path: DIRS.BUILD,
        filename: 'server-bundle.js'
    },
    resolve: {
        modulesDirectories: [ DIRS.SRC_SERVER, DIRS.SRC_CLIENT, 'node_modules'],
        extensions: ['', '.webpack.js', '.web.js', '.js'],
    },
    module: {
        loaders: [
            {
                test: /\.js$/, 
                loader: 'babel', 
                exclude: /node_modules/,
                query: {
                    retainLines: true
                }
            },
            {test: /\.json$/, loader: 'json'},
            {
                test: /\.styl$/, 
                loader: [
                    'isomorphic-style-loader',
                    'css?localIdentName=[name]_[local]_[hash:base64:3]',
                    'stylus'
                ].join('!')
            },
            {
                test: /\.css$/,
                loader: 'isomorphic-style-loader!css-loader'
            },
            {
                test: /\.html$/,
                loader: 'html-loader?attrs[]=video:src'
            }, {
                test: /\.mp4$/,
                loader: 'url?limit=10000&mimetype=video/mp4'
            },
            {
                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff'
            },
            {
                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
                loader: 'file-loader'
            },{
                test: /\.(png|jpg|jpeg|gif)$/,
                loader: 'url-loader',
                query: {
                  name: IS_PROD ? '[hash].[ext]' : '[path][name].[ext]?[hash]',
                  limit: 10000,
                }
            }
        ]
    },
    plugins: [
        new webpack.DefinePlugin({
            __DEV__: !IS_PROD,
            __SERVER__: true,
            "process.env.NODE_ENV": (IS_PROD ? JSON.stringify("production") : JSON.stringify("development"))
        }),
        new webpack.ProvidePlugin({
            React: 'react',
            _: 'lodash'
        }),
        new webpack.BannerPlugin('require("source-map-support").install();',{
            raw: true, entryOnly: false
        })
    ],
    stylus: {
        use: [nib(), axis(), rupture(), bootstrap()],
        import: path.resolve(__dirname, '../src/stylus/index.styl'),
        error: IS_PROD,
        compress: IS_PROD
    }
};

if (IS_PROD){
    // console.log('--- SERVER:PRODUCTION_MODE ---');
    config.plugins = config.plugins.concat([  
        new webpack.optimize.UglifyJsPlugin({compress: {warnings: false}}),
        new webpack.optimize.AggressiveMergingPlugin()
    ]);
}

module.exports = config;
这是我的控制台，显示正在呈现的字体

这就是我想要得到但却得不到的东西

有人能帮我吗？这有很多代码需要检查。你有没有试着把你的问题简化成它的问题？实际上代码并不多。server.config.js和client.config.js几乎相同。请看一看。我认为要回答这个问题，需要这些文件。如果你能帮忙，我几乎可以向你保证，这个问题可以更简洁地表达出来