@10up/frontity-webpack-config

This package extends frontity default webpack and babel config

Requirements

• @frontity/core >= 1.14.0

Installation

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: [
    '@10upfrontity-build-config',
]

Settings

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.

Features

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);
}

HMR

Hot Module Reload works out of the box.