Skip to main content

Custom Webpack config

You can customize the Webpack configuration if you have at least Version 1.1 of Remotion.

Create a config file called remotion.config.ts in the root of your project. As a confirmation, you should get a console message Applied configuration from [configuration-file].

Overriding the webpack config#

Get familiar with the default Webpack configuration which can be found here.

In your remotion.config.ts file, you can call Config.Bundler.overrideWebpackConfig from remotion.

Overriding the Webpack config uses the reducer pattern - pass in a function that takes as it's argument a Webpack configuration and return a new Webpack configuration.

ts
import {Config} from 'remotion'
 
Config.Bundling.overrideWebpackConfig((currentConfiguration) => {
return {
...currentConfiguration,
module: {
...currentConfiguration.module,
rules: [
...(currentConfiguration.module?.rules ?? []),
// Add more loaders here
],
},
}
})
ts
import {Config} from 'remotion'
 
Config.Bundling.overrideWebpackConfig((currentConfiguration) => {
return {
...currentConfiguration,
module: {
...currentConfiguration.module,
rules: [
...(currentConfiguration.module?.rules ?? []),
// Add more loaders here
],
},
}
})
info

Using the reducer pattern will help with type safety, give you auto-complete, ensure forwards-compatibility and keep it completely flexible - you can override just one property or pass in a completely new Webpack configuration.

Snippets#

Enabling MDX support#

The following remotion.config.ts file shows how to enable support for MDX. Installation of mdx-loader babel-loader @babel/preset-env @babel/preset-react is required.

ts
Config.Bundling.overrideWebpackConfig((currentConfiguration) => {
return {
...currentConfiguration,
module: {
...currentConfiguration.module,
rules: [
...(currentConfiguration.module?.rules
? currentConfiguration.module.rules
: []),
{
test: /\.mdx?$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
[
'@babel/preset-react',
{
runtime: 'automatic',
},
],
],
},
},
'mdx-loader',
],
},
],
},
}
})
ts
Config.Bundling.overrideWebpackConfig((currentConfiguration) => {
return {
...currentConfiguration,
module: {
...currentConfiguration.module,
rules: [
...(currentConfiguration.module?.rules
? currentConfiguration.module.rules
: []),
{
test: /\.mdx?$/,
use: [
{
loader: 'babel-loader',
options: {
presets: [
'@babel/preset-env',
[
'@babel/preset-react',
{
runtime: 'automatic',
},
],
],
},
},
'mdx-loader',
],
},
],
},
}
})
info

Create a file which contains declare module '*.mdx'; in your project to fix a TypeScript error showing up.

Enable TailwindCSS support#

  1. Install the following dependencies:
bash
npm i postcss-loader postcss postcss-preset-env tailwindcss autoprefixer
bash
npm i postcss-loader postcss postcss-preset-env tailwindcss autoprefixer
  1. Add the following to your remotion.config.ts file:
ts
Config.Bundling.overrideWebpackConfig((currentConfiguration) => {
return {
...currentConfiguration,
module: {
...currentConfiguration.module,
rules: [
...(currentConfiguration.module?.rules
? currentConfiguration.module.rules
: []
).filter((rule) => {
if (rule === '...') {
return false
}
if (rule.test?.toString().includes('.css')) {
return false
}
return true
}),
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['postcss-preset-env', 'tailwindcss'],
},
},
},
],
},
],
},
}
})
ts
Config.Bundling.overrideWebpackConfig((currentConfiguration) => {
return {
...currentConfiguration,
module: {
...currentConfiguration.module,
rules: [
...(currentConfiguration.module?.rules
? currentConfiguration.module.rules
: []
).filter((rule) => {
if (rule === '...') {
return false
}
if (rule.test?.toString().includes('.css')) {
return false
}
return true
}),
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader',
{
loader: 'postcss-loader',
options: {
postcssOptions: {
plugins: ['postcss-preset-env', 'tailwindcss'],
},
},
},
],
},
],
},
}
})
  1. Create a file src/style.css with the following content:
css
@tailwind base;
@tailwind components;
@tailwind utilities;
css
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Import the stylesheet in your src/Video.tsx file. Add to the top of the file:
js
import "/style.css";
js
import "/style.css";
  1. Start using TailwindCSS! You can verify that it's working by adding className="bg-red-900" to any element.

  2. Optional: Add a tailwind.config.js file to the root of your project. Add /* eslint-env node */ to the top of the file to get rid of an ESLint rule complaining that module is not defined.

:::warn Due to a caching bug, the config file might not be picked up until you remove the node_modules/.cache folder - watch this issue: https://github.com/remotion-dev/remotion/issues/315 :::

Enable SASS/SCSS support#

  1. Install the following dependencies:
bash
npm i sass sass-loader
bash
npm i sass sass-loader
  1. Add the following to your remotion.config.ts file:
ts
Config.Bundling.overrideWebpackConfig((currentConfiguration) => {
return {
...currentConfiguration,
module: {
...currentConfiguration.module,
rules: [
...(currentConfiguration.module?.rules
? currentConfiguration.module.rules
: []),
{
test: /\.s[ac]ss$/i,
use: [
{loader: 'style-loader'},
{loader: 'css-loader'},
{loader: 'sass-loader', options: {sourceMap: true}},
],
},
],
},
}
})
ts
Config.Bundling.overrideWebpackConfig((currentConfiguration) => {
return {
...currentConfiguration,
module: {
...currentConfiguration.module,
rules: [
...(currentConfiguration.module?.rules
? currentConfiguration.module.rules
: []),
{
test: /\.s[ac]ss$/i,
use: [
{loader: 'style-loader'},
{loader: 'css-loader'},
{loader: 'sass-loader', options: {sourceMap: true}},
],
},
],
},
}
})
  1. Restart the preview server.

Use legacy babel loader#

See Using legacy Babel transpilation.

Customizing configuration file location#

You can pass a --config option to the command line to specify a custom location for your configuration file.

See also#