Importing style sheets in Airtable is not easy. If you are used to create-react-app
, then you would expect to just import a .css
or a .scss
in your javascript
file. But that's not possible in Airtable Custom Blocks. Read on to see my workflow for solving this problem.
Github link
Don't forget to checkout my Udemy
https://www.udemy.com/course/the-complete-airtable-custom-blocks-development-course
Problem:
Airtable has these 2 APIs for loading styles.
loadCSSFromString
loadCSSFromURLAsync
During development, the CSS is not hosted anywhere and we write CSS in their own files and not as a string.
Solution:
- Write CSS normally - in their files.
- Convert the CSS into a string
- Use
loadCSSFromString
to load this string.
How?
- Step 1: Write CSS normally in
styles.css
Example styles.css
.main-container {
max-width: 1000px
}
* {
border: 1px solid red;
}
2. Step 2: Convert this CSS to a string and write a new file styles.js
with the content. We wrap the whole CSS file in template literals
to convert into a string.
export default `
.main-container {
max-width: 1000px
}
* {
border: 1px solid red;
}
`;
3. Step 3: Import the new JS file and pass this to loadCSSFromString
import styles from '../styles-directory/styles';
loadCSSFromString(styles);
How do I automate this?
Lets write a file watcher which will watch for changes to styles.css
and automatically create styles.js
for us.
const fs = require('fs');
// The path to your styles css
const styleFile = '../frontend/styles/styles.css';
// Style String start
let start = 'export default `';
// Style String end
let end = '`';
// Watch your style file for changes
fs.watchFile(styleFile, (curr, prev) => {
console.log(`${styleFile} file Changed`);
// Get the file contents
fs.readFile('../frontend/styles/styles.css', function(err, buf) {
const contents = buf.toString();
// Convert the file contents into a string
let data = start + contents + end;
// Write the file back as `styles.js`
fs.writeFile("../frontend/styles/styles.js", data, (err) => {
if (err) console.log(err);
console.log("Successfully Written to File.");
});
})
});
Thats it. Everytime your styles.css
changes, it will automatically generate styles.js
and if these file changes will cause your Airtable Custom Block to automatically reload and load the new styles.
How do I use SCSS ?
I use SCSS
for all my styles and don't write CSS
directly.
- Step 1: Install the
scss
compiler fromhttps://www.npmjs.com/package/sass
globally by runningnpm install -g sass
- Compile your
SCSS
stylesheets toCSS
stylesheets. Also, run this inwatch
mode so that everytime yourSCSS
changes, theCSS
is automatically generated. The command issass --watch frontend/styles/main.scss frontend/styles/styles.css
- And thats how you go from
SCSS
toCSS
toJS String
toloadCSSFromString
to your Airtable Custom block.
Improvements
Update: Check this github link - https://github.com/saas-developer/airtable-build-styles . It contains the improvements mentioned below.
node-sass
is a package available that can be integrated directly into your javascript code. So that means, you don't need the separate scss
compiler step. You can write that code directly in your javascript file.