Provides an opinionated abstraction to webpack module build/compilation.
The primary function of this package it to provide an easy to use stylesheet/theme compiler for websites as well as reusable scss scaffolding files.
npm install common-frontend
There is no need to install webpack or webpack-cli to compile modules with this package.
This package provides a single command line entry point at common-frontend
Commands can be run via package.json scripts or using npx.
All examples below use npx for simplicity.
View the commands help output for a list of available commands and how to use them.
npx common-frontend help
npx common-frontend [command] -h
To initialise a project for use with this command run the following.
npx common-frontend init
This will generate the configuration file to use in builds/development server runs.
Builds a project using the configuration
npx common-frontend build
# Dev mode
npx common-frontend build -d
# Watch mode
npx common-frontend build -w
Runs a development server using the configuration
npx common-frontend server
# Dev mode
npx common-frontend server -d
Configuration is handled using a standard javascript file.
This file is capable of requiring other modules thus extending the functionality of this package.
The default configuration file .cf.config.js
will be searched for in the current working directory and child directories
when build or server commands are executed, if, no config file option is
provided to the command.
Rather than documenting all configuration options here they are detailed in the configuration file itself. This file can be generated in the current working directory by running the package init command.
This package adds scss scaffolding files as well integration with following third party packages :
The SCSS framework is self documenting.
Documentation is built using sassdoc and this needs to be installed manually.
Install the sassdoc peerdependency.
npm install sassdoc
npm explore @jparkinson1991/common-frontend -- npm run document
This will create a documentation/index.html file inside this packages
directory, which can be opened in any browser.
To generate and automatically open the documentation page run the following.
npm explore @jparkinson1991/common-frontend -- npm run document:open
The following import aliases are provided for use
_The path of the configuration file used in builds.__srcThe path to the source root defined in configuration.
Globbed imports are available for use on realtive or absolute paths.
Globbed imports do not work with aliased or tilde imports.
# Good
@import 'partial/*.scss';
@import '/absolute/import/**/*.scss';
# Bad
@import '_/partal/*.scss'
@import ~bootstrap-sass/**/*.scss'
SemVer for versioning. For the versions available, see the tags on this repository.
This project is licensed under the MIT License - see the LICENSE file for details