10up's frontity build customizations

Usage no npm install needed!

<script type="module">
  import 10upFrontityBuildConfig from 'https://cdn.skypack.dev/@10up/frontity-build-config';



This package extends frontity default webpack and babel config

Support Level


  • @frontity/core >= 1.14.0


To install this package you will need an existing frontity project. Check out the frontity docs for instructions.

Install this package:

npm install @10upfrontity-build-config --save

Then in your frontitiy.settings.[js|ts] add the package in the packages section.

packages: [


This package accepts a publicPath setting in case you're building frontity with a different public path for your assets.

    name: '@10upfrontity-build-config',
    state: {
        TenUpBuildConfig: {
            publicPath: '/custom-public-path'

The the css is compiled to /build/[publicPath]/css/index.css and automatically included in the header.


Global Sass and PostCSS

Just import the sass or postcss files anywhere and they will automatically be loaded on the page.

import '../assets/index.scss';
import '../assets/index.css';
/* assets/index.css */
a {
    color: blue !important;
/* assets/index.scss */
header {
    h1.heading-size-1 {
        color: pink;

CSS Modules

import styles from './index.module.css';

const App = () => {
    return (
        <div className={styles.mainContent}></div>
/* index.module.css */
.mainContent {
    min-height: calc(100vh - 190px);


Hot Module Reload works out of the box.