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

In fresh laravel 8 application I need to change font to roboto and in file webpack.config.js which had content :

const path = require('path');

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

I added several lines :

const path = require('path');

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

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

    },

};

But I got erros in the console :

$ 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

Is my syntax wrong ? Looking at structure webpack.config.js I suppose it must be valid...

Thanks in advance!

CodePudding user response：

You need to update this in your tailwind.config.js file not your webpack.config.js file.

If you don't have a tailwind.config.js file, you can generate it by running:

npx tailwindcss init

Alternatively (assuming you haven't specified the path for the config file in your webpack.mix.js file), you could just create the tailwind.config.js in your app's root directory with the following code in it:

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