веб-пакет не загружается @ font-face - PullRequest
Новая
       35

веб-пакет не загружается @ font-face

0 голосов
/ 06 сентября 2018

в моем приложении React я выполняю рендеринг на стороне сервера, поэтому я не хочу добавлять node_modules на стороне моего сервера из-за проблем с производительностью. Но я хочу css из node_modules, которые используются в качестве пользовательского интерфейса Kit libs.so я использовал webpack nodeExternal в моем файле webpack.server.config , например 

const path = require('path');
const merge = require('webpack-merge');
const baseConfig = require('./webpack.base.js');
const nodeExternals = require('webpack-node-externals')
let test = {
    test: /\.css$/,
    loader: 'css/locals?module&localIdentName=[name]__[local]___[hash:base64:5]'
}   


const config = {
    target:'node',
    entry: './src/index.js',

    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname,'build')
    },
    externals: [nodeExternals({
        whitelist: [/\.(?!(?:jsx?|json)$).{1,5}$/i]
    })]
}

module.exports  = merge(baseConfig,config)

здесь веб-пакет добавление файлов CSS, но не загружается @ font-face из моих файлов набора UI node_modules. Если я удаляю nodeExternal из webpack.server.config файл, то все работает нормально, но bundle.js размер файла увеличивается.
я уже добавил правило шрифта в мой webpack.base.config файл 

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CSSExtract = new ExtractTextPlugin('styles.css');


module.exports ={
    module: {
        rules: [{
            loader: 'babel-loader',
            test: /\.js$/,
            exclude: /node_modules/
        }, {
            test: /\.s?css$/,
            use: CSSExtract.extract({
                use: [
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    },
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            })
        },{
            test: /\.(gif|svg|jpg|png|ttf|eot|woff(2)?)(\?[a-z0-9=&.]+)?$/,
            loader: 'url-loader?limit=100000&name=fonts/[name].[ext]'
        }
    ],
    },
    devtool: 'inline-source-map',
    plugins: [
        CSSExtract
    ]
}

Я пытался с file-loader также, но та же проблема
это показывает мне ошибку

@ font-face {
^
Ошибка синтаксиса: неверный или неожиданный токен

Как добавить файлы css из node_modules с помощью @ font-face

...