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.
PWA Studio uses Webpack 4. Ensure that any packages you use are compatible with Webpack 4.
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.
Copied to your clipboardyarn 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:
Copied to your clipboard12 config.plugins = [3 ...config.plugins,4 new DefinePlugin({5 /**6 * Make sure to add the same constants to7 * 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: true18 }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:
Copied to your clipboard1$button-color: #ff495b;2$button-color-hover: #ff9c1a;34.root {5 padding: 15px;6}78.button {9 color: $button-color;1011 &:hover {12 color: $button-color-hover;13 }14}
Create a component and import the SASS file:
Copied to your clipboard1import React from "react";2import defaultClasses from "./myComponent.scss";34const MyComponent = () => (5 <div className={defaultClasses.root}>6 <button className={defaultClasses.button}>My Component</button>7 </div>8);910export 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.
Copied to your clipboardyarn add --dev less-loader less
Step 2. Modify the Webpack configuration#
Edit webpack.config.js
and add a new config
rule entry:
Copied to your clipboard12 config.plugins = [3 ...config.plugins,4 new DefinePlugin({5 /**6 * Make sure to add the same constants to7 * 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: true18 }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:
Copied to your clipboard1@button-color: #ff495b;2@button-color-hover: #ff9c1a;34.root {5 padding: 15px;6}78.button {9 color: @button-color;1011 &:hover {12 color: @button-color-hover;13 }14}
Create a component and import the LESS file:
Copied to your clipboard1import React from "react";2import defaultClasses from "./myComponent.less";34const MyComponent = () => (5 <div className={defaultClasses.root}>6 <button className={defaultClasses.button}>My Component</button>7 </div>8);910export default MyComponent;