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'sWoodBurnInsuranceCompact/DemoDxSite/Woodburn Insurance/components/Woodburn Insurance/content/webdav/themes/Woodburn Insurance/css
. -
Create two (2) separate .css files. Let's name it
custom.css
andcustom.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.
.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
andcustom.css.uncompressed.css
tomaster.css
andmaster.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.
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 beWoodBurnInsuranceCompact/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 thestyles-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.