This section applies to you if:
- You are using webpack to bundle your application (for instance, you are building a React app)
- You want to compile yourself the source SCSS of Swatch
- ... and while doing so, you wish to customize its variables
1. Install sass-loader
As the source code of Swatch is SCSS, first we need to install the
sass-loader package from npm.
2. Add webpack config
In your webpack config file, make sure the highlighted lines are present.
sass-loader must be the last loader included for scss files. This is because the loaders are executed in reverse order.
includePaths option will give your SCSS
@use directives module resolution from the
node_modules directory (this substitutes to writing unreliable relative paths).
3. Import into your scss file
Copy the content of
node_modules/@fwrlines/swatch/src/custom.scss into your
styles.scss (or the name of your custom scss styles) file and replace
Then, customize Swatch following this guide.