Styling (CSS and SCSS)

Overview

What You Will Learn In This Tutorial

Adding styles to DX Themes
Adding third-party library CSS styles and custom styles in DX Modules
Adding styles in DX Script Applications

Recommended

Learn how to setup your own Script Applications, Themes, and DX Modules by following the WoodBurnInsuranceCompact sample.

Adding styles to DX Themes

Before we continue

We need to have a Theme already setup. Follow the steps here to setup your own Theme.

Go to the css/ folder of the Theme. In our case, it's WoodBurnInsuranceCompact/DemoDxSite/Woodburn Insurance/components/Woodburn Insurance/content/webdav/themes/Woodburn Insurance/css.

Create two (2) separate .css files. Let's name it custom.css and custom.css.uncompressed.css.

📦css
┣ ...
┣ 📜custom.css                  // This should be minified. You can use a minifier online.
┣ 📜custom.css.uncompressed.css // This is for debug mode. This should not be compressed.
┣ 📜master.css
┣ 📜master.css.uncompressed.css
┗ ...

Let's define some classes that we will use later on a Script Application.

custom.css.uncompressed.csscustom.css

.error-btn {
    border: 1px solid red;
    background-color: red;    
}

.error-text {
    color: #fff;
}

.error-btn{border:1px solid red;background-color:red}.error-text{color:#fff}

Recommended

Avoid adding styles directly on HTML Element to prevent conflicts with the styles in Themes and on other Script Apps. Instead, use classes and ids selectors that is unique for the current Script Application you are on.

button {
    background-color: red;  /* ❌ Bad */
}

.error-btn {
    background-color: red;  /* ✅ Good */
}

button.error-btn {
    background-color: red;  /* ✅ Still good */
}

Import your custom.css and custom.css.uncompressed.css to master.css and master.uncompressed.css respectively.
master.css
```
@import url("custom.css");
```
master.uncompressed.css
```
@import url("custom.uncompressed.css");
```
To make your changes reflect on DX, redeploy your Theme.

On your Script Application, you can now use the custom classes from Themes on your script application/s.

SomeComponent.jsx

function SomeComponent() {
    return (
        <div>
            {/* "error-btn" and "error-text" classes came from the Themes */}
            <button class="error-btn">Error-y button</button>
            <span class="error-text">Error!</span>
        </div>
    );
}

export default SomeComponent;

Adding third-party library CSS styles and custom styles in DX Modules

Before we continue

We need to have a DX Module already up and running. Follow the steps here to setup your own DX Modules.

Sometimes, we want to add styles on DX Modules if we want share styles among our script applications, or a third-party library on DX Modules requires you to import its styles on your script application/s. The following step guides us on how to add third-party library CSS styles and custom styles in our DX Module.

Open styles-index.css on one of your sub-modules. In our case, it'll be WoodBurnInsuranceCompact/DxModule/SubModuleReact/styles-index.css

Import styles that you need in your script applications in styles-index.css.

For example, smart-webcomponents-react requires us to import its style to be able to use its components properly.

styles-index.css

@import 'smart-webcomponents-react/source/styles/smart.default.css';

/* or in url format */
@import url('smart-webcomponents-react/source/styles/smart.default.css');

We can also add custom stylesheets on styles-index.css.

styles-index.css

@import 'path/to/custom-style.css';

/* or in url format */
@import url('path/to/custom-style.css');

In your Script Application, add an additional entry on your dev server webpack configuration. In our case, it's WoodBurnInsuranceCompact/WBILogin/webpack.dev.js. Add an "entry" object. Its value is the path to the styles-index.css.
webpack.dev.js
```
...
module.exports = {
    entry: {
        // Note: point this to the DX Module project
        dxmodulesstyles: path.resolve(__dirname, '../DxModule/SubModuleReact/styles-index.css'),
    },
    ...
};
```
Tips:

For more information on why we need to do this, visit Code Splitting.
To make your changes reflect on DX, redeploy your DX Modules either manually or via dxclient (recommended). Make sure to re-deploy all dependent script applications as well.

Setting styles in DX Script Applications

Before we continue

We need to have a Script Application already setup. Follow the steps here to setup your own Script Application, preferrably with DX Modules.

Setting styles in a Script Application is the same way you add styles to a React Application. In Woodburn Insurance Script Applications, we use SCSS Modules to style our components.

Button.jsx

import styles from './Button.module.scss';

class Button extends Component {
  render() {
    return <button className={styles.error}>Error Button</button>;
  }
}

button.module.scss

.error {
    background-color: red;
}

Recommended

Avoid adding styles directly on HTML Element to prevent conflicts with the styles in Themes and on other Script Apps. Instead, use classes and ids selectors that is unique for the current Script Application you are on.

button {
    background-color: red;  /* ❌ Bad */
}

.error {
    background-color: red;  /* ✅ Good */
}

button.error {
    background-color: red;  /* ✅ Still good */
}

Redeploy Script Application

To make your changes reflect on the DX, you need to redeploy your Script Application.