@remotion/enable-scss

This package provides a Webpack override for enabling SCSS/SASS with Remotion..

Installation

Install @remotion/enable-scss as well as TailwindCSS dependencies.

npm

npm i --save-exact @remotion/enable-scss@4.0.417 sass@1.77.2 sass-loader@14.2.1 css-loader@5.2.7

This assumes you are currently using v4.0.417 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

bun

pnpm i @remotion/enable-scss@4.0.417 sass@1.77.2 sass-loader@14.2.1 css-loader@5.2.7

This assumes you are currently using v4.0.417 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

pnpm

bun i @remotion/enable-scss@4.0.417 sass@1.77.2 sass-loader@14.2.1 css-loader@5.2.7

This assumes you are currently using v4.0.417 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

yarn

yarn --exact add @remotion/enable-scss@4.0.417 sass@1.77.2 sass-loader@14.2.1 css-loader@5.2.7

This assumes you are currently using v4.0.417 of Remotion.
Also update remotion and all `@remotion/*` packages to the same version.
Remove all ^ character in front of the version numbers of it as it can lead to a version conflict.

warning

Pay attention to install exactly these versions.
Newer versions may not work.

Usage

Override the Webpack config by using enableScss().

remotion.config.ts
ts
import {Config} from '@remotion/cli/config';
import {enableScss} from '@remotion/enable-scss';
 
Config.overrideWebpackConfig((currentConfiguration) => {
  return enableScss(currentConfiguration);
});

APIs

enableScss()

Override the Webpack config to enable SCSS