为什么我无法在 Laravel 应用程序的 webpack 中添加 roboto 字体？

Question

在新的 laravel 8 应用程序中，我需要将字体更改为 roboto 并且在包含内容的文件 webpack.config.js 中：

const path = require('path');

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

我添加了几行：

const path = require('path');

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

    theme: {
        extend: {
            fontFamily: {
                'roboto': ['Roboto'],
            },
        },

    },

};

但我在控制台中遇到错误:

$ npm run watch-poll

> @ watch-poll /project/Photographers
> mix watch -- --watch-options-poll=1000

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
- configuration has an unknown property 'theme'. These properties are valid:
object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry?, experiments?, externals?, externalsPresets?, externalsType?, ignoreWarnings?, infrastructureLogging?, loader?, mode?, module?, name?, node?, optimization?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, snapshot?, stats?, target?, watch?, watchOptions? }
-> Options object as provided by the user.
For typos: please correct them.
For loader options: webpack >= v2.0.0 no longer allows custom properties in configuration.
Loaders should be updated to allow passing options via loader options in module.rules.
Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
plugins: [
new webpack.LoaderOptionsPlugin({
// test: /\.xxx$/, // may apply this only for some modules
options: {
theme: …
}
})
]
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! @ watch-poll: `mix watch -- --watch-options-poll=1000`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the @ watch-poll script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/user/.npm/_logs/2021-12-05T15_58_19_639Z-debug.log

我的语法有误吗？查看结构 webpack.config.js 我想它一定是有效的...

提前致谢！

Answer 1

您需要在 tailwind.config.js 文件而不是 webpack.config.js 文件中更新它。

如果您没有 tailwind.config.js 文件，您可以 generate it 通过运行:

npx tailwindcss init

或者（假设您没有在 webpack.mix.js 文件中指定配置文件的路径），您可以只在应用程序的根目录中创建 tailwind.config.js，其中包含以下代码:

module.exports = {
  purge: [],
  darkMode: false,
  theme: {
    extend: {
      fontFamily: {
        'roboto': ['Roboto'],
      },
    },
  },
  variants: {},
  plugins: [],
}

为什么我无法在 Laravel 应用程序的 webpack 中添加 roboto 字体？

Why I can not add roboto font in webpack of Laravel app?

laravel

webpack