Laravel 8项目webpack配置中添加Roboto字体报错如何解决？

你将Tailwind CSS的专属配置项theme写入了Webpack配置文件webpack.config.js，Webpack本身没有theme这个合法配置字段，因此启动时直接抛出未知属性错误。

• 第一步：恢复webpack.config.js为原有内容，删除你新增的theme相关代码，恢复后内容如下：

const path = require('path');

module.exports = {
    resolve: {
        alias: {
            '@': path.resolve('resources/js'),
        },
    },
};

• 第二步：根据你是否使用Tailwind CSS做对应配置：
  • 如果你使用Tailwind CSS：
    将theme配置写在项目根目录的tailwind.config.js文件中，示例如下：

    module.exports = {
      content: [
        "./resources/**/*.blade.php",
        "./resources/**/*.js",
        "./resources/**/*.vue",
      ],
      theme: {
        extend: {
          fontFamily: {
            roboto: ['Roboto', 'sans-serif'],
          },
        },
      },
      plugins: [],
    }
    

  • 如果你不使用Tailwind CSS：不需要额外添加theme配置，跳过这一步即可。
• 第三步：引入Roboto字体
  运行以下命令安装本地Roboto字体包：

  npm install typeface-roboto --save
  

  之后在项目全局入口资源中引入字体：
  1. 在resources/js/app.js中添加一行：

  import 'typeface-roboto'
  

  2. 或在resources/css/app.css中添加全局字体规则：

  body {
    font-family: 'Roboto', sans-serif;
  }
  

  如果你使用Tailwind CSS，也可以直接在css中使用你注册的工具类：

  body {
    @apply font-roboto;
  }
  

• 第四步：重新编译资源
  运行npm run watch-poll即可正常启动，不会再抛出配置错误。

内容的提问来源于stack exchange，提问作者Petro Gromovo