Enable SASS or LESS support

This tutorial provides the steps to enable SASS or LESS support in your storefront project. Use these Webpack configurations to add support for SASS and LESS alongside CSS Modules.

Add SASS support#

Step 1. Install dependencies#

Use a package manager, such as yarn or npm, to install the SASS loader as a dev dependency.

yarn add --dev sass-loader@10.1.1 node-sass
CopyCopied to your clipboard
yarn add --dev sass-loader@10.1.1 node-sass

Step 2. Modify the Webpack configuration#

Edit webpack.config.js and add a new config rule entry:

    config.plugins = [
        ...config.plugins,
        new DefinePlugin({
            /**
             * Make sure to add the same constants to
             * the globals object in jest.config.js.
             */
            POSSIBLE_TYPES: JSON.stringify(possibleTypes),
            STORE_NAME: JSON.stringify('Venia')
        }),
        new HTMLWebpackPlugin({
            filename: 'index.html',
            template: './template.html',
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        })
    ];
+
+   config.module.rules.push({
+       test: /\.s[ca]ss$/,
+       use: [
+           'style-loader',
+           {
+               loader: 'css-loader',
+               options: {
+                   modules: true,
+                   sourceMap: true,
+                   localIdentName: '[name]-[local]-[hash:base64:3]'
+               }
+           },
+           'sass-loader'
+       ]
+   });
CopyCopied to your clipboard
1
2    config.plugins = [
3        ...config.plugins,
4        new DefinePlugin({
5            /**
6             * Make sure to add the same constants to
7             * the globals object in jest.config.js.
8             */
9            POSSIBLE_TYPES: JSON.stringify(possibleTypes),
10            STORE_NAME: JSON.stringify('Venia')
11        }),
12        new HTMLWebpackPlugin({
13            filename: 'index.html',
14            template: './template.html',
15            minify: {
16                collapseWhitespace: true,
17                removeComments: true
18            }
19        })
20    ];
21+
22+   config.module.rules.push({
23+       test: /\.s[ca]ss$/,
24+       use: [
25+           'style-loader',
26+           {
27+               loader: 'css-loader',
28+               options: {
29+                   modules: true,
30+                   sourceMap: true,
31+                   localIdentName: '[name]-[local]-[hash:base64:3]'
32+               }
33+           },
34+           'sass-loader'
35+       ]
36+   });

Step 3. Create a SASS file and import it in a component#

Create the myComponent.scss file:

$button-color: #ff495b;
$button-color-hover: #ff9c1a;

.root {
  padding: 15px;
}

.button {
  color: $button-color;

  &:hover {
    color: $button-color-hover;
  }
}
CopyCopied to your clipboard
1$button-color: #ff495b;
2$button-color-hover: #ff9c1a;
3
4.root {
5  padding: 15px;
6}
7
8.button {
9  color: $button-color;
10
11  &:hover {
12    color: $button-color-hover;
13  }
14}

Create a component and import the SASS file:

import React from "react";
import defaultClasses from "./myComponent.scss";

const MyComponent = () => (
  <div className={defaultClasses.root}>
    <button className={defaultClasses.button}>My Component</button>
  </div>
);

export default MyComponent;
CopyCopied to your clipboard
1import React from "react";
2import defaultClasses from "./myComponent.scss";
3
4const MyComponent = () => (
5  <div className={defaultClasses.root}>
6    <button className={defaultClasses.button}>My Component</button>
7  </div>
8);
9
10export default MyComponent;

Add LESS support#

Step 1. Install dependencies#

Use a package manager, such as yarn or npm, to install the LESS loader as a dev dependency.

yarn add --dev less-loader less
CopyCopied to your clipboard
yarn add --dev less-loader less

Step 2. Modify the Webpack configuration#

Edit webpack.config.js and add a new config rule entry:

    config.plugins = [
        ...config.plugins,
        new DefinePlugin({
            /**
             * Make sure to add the same constants to
             * the globals object in jest.config.js.
             */
            POSSIBLE_TYPES: JSON.stringify(possibleTypes),
            STORE_NAME: JSON.stringify('Venia')
        }),
        new HTMLWebpackPlugin({
            filename: 'index.html',
            template: './template.html',
            minify: {
                collapseWhitespace: true,
                removeComments: true
            }
        })
    ];
+
+   config.module.rules.push({
+       test: /\.less$/,
+       use: [
+           'style-loader',
+           {
+               loader: 'css-loader',
+               options: {
+                   modules: true,
+                   sourceMap: true,
+                   localIdentName: '[name]-[local]-[hash:base64:3]'
+               }
+           },
+           'less-loader'
+       ]
+   });
CopyCopied to your clipboard
1
2    config.plugins = [
3        ...config.plugins,
4        new DefinePlugin({
5            /**
6             * Make sure to add the same constants to
7             * the globals object in jest.config.js.
8             */
9            POSSIBLE_TYPES: JSON.stringify(possibleTypes),
10            STORE_NAME: JSON.stringify('Venia')
11        }),
12        new HTMLWebpackPlugin({
13            filename: 'index.html',
14            template: './template.html',
15            minify: {
16                collapseWhitespace: true,
17                removeComments: true
18            }
19        })
20    ];
21+
22+   config.module.rules.push({
23+       test: /\.less$/,
24+       use: [
25+           'style-loader',
26+           {
27+               loader: 'css-loader',
28+               options: {
29+                   modules: true,
30+                   sourceMap: true,
31+                   localIdentName: '[name]-[local]-[hash:base64:3]'
32+               }
33+           },
34+           'less-loader'
35+       ]
36+   });

Step 3. Create a LESS file and import it on your component#

Create the myComponent.less file:

@button-color: #ff495b;
@button-color-hover: #ff9c1a;

.root {
  padding: 15px;
}

.button {
  color: @button-color;

  &:hover {
    color: @button-color-hover;
  }
}
CopyCopied to your clipboard
1@button-color: #ff495b;
2@button-color-hover: #ff9c1a;
3
4.root {
5  padding: 15px;
6}
7
8.button {
9  color: @button-color;
10
11  &:hover {
12    color: @button-color-hover;
13  }
14}

Create a component and import the LESS file:

import React from "react";
import defaultClasses from "./myComponent.less";

const MyComponent = () => (
  <div className={defaultClasses.root}>
    <button className={defaultClasses.button}>My Component</button>
  </div>
);

export default MyComponent;
CopyCopied to your clipboard
1import React from "react";
2import defaultClasses from "./myComponent.less";
3
4const MyComponent = () => (
5  <div className={defaultClasses.root}>
6    <button className={defaultClasses.button}>My Component</button>
7  </div>
8);
9
10export default MyComponent;

Last updated 4/14/2022

Was this helpful?

Yes

No