Question

在我的React应用中，我正在实现服务器端渲染，因此由于性能问题，我不想在服务器端添加node_modules。但是我想从{{1} }用作UI Kit libs.so，所以我在 webpack.server.config 文件（如

）中使用了webpack nodeExternal

css

在此处 webpack 添加css文件，但是从我的node_modules UI工具包文件中不加载 @ font-face。如果我从中删除 nodeExternal webpack.server.config 文件，那么一切正常，但是node_modules文件的大小增加了。
我已经在我的 webpack.base.config 文件中添加了 font rule

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)

我也尝试过bundle.js，但存在相同的问题
显示我错误

@ font-face {
  ^
  SyntaxError：无效或意外的令牌

我该如何使用@ font-face从node_modules添加CSS文件

Answer 1

这是webpack的设置：

{
        test: /\.(woff(2)?|ttf|eot)(\?v=\d+\.\d+\.\d+)?$/,
        use: [
          {
            loader: "file-loader",
            options: {
              name: "[name].[contenthash].[ext]",
              outputPath: "fonts/",
            },
          },
        ],
      },

然后，您必须将它们导入到css或scss主文件中。

@font-face {
  font-family: "Montserrat";
  src: url("../../assets/fonts/Montserrat-Light.ttf");
  font-weight: lighter;
  font-style: normal;
}

webpack没有加载@ font-face

1 个答案: