Webpack Compilation

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.

npm i --save-dev sass-loader

2. Add webpack config

In your webpack config file, make sure the highlighted lines are present.

/webpack.config.js
module.exports={
// ...
module:{
rules:[
// ...
{
test:/\.(scss|css)$/,
use :[
{
loader:MiniCssExtractPlugin.loader
}, {
loader :'css-loader',
}, {
loader:'postcss-loader'
}, {
loader :'sass-loader',
options:{
sassOptions:{
includePaths:['./node_modules']
}
}
}
]
}
// ...
]
}
// ...
}
caution

sass-loader must be the last loader included for scss files. This is because the loaders are executed in reverse order.

info

The includePaths option will give your SCSS @import and @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

src/css/styles.scss
@use 'mixins';
@use 'vars';

with

src/css/styles.scss
@use '@fwrlines/swatch/src/mixins';
@use '@fwrlines/swatch/src/vars';

Then, customize Swatch following this guide.

Edit this page