π Advanced react-scripts
This repository is fork of react-scripts
with fresh dependency packages and simple webpack modifications that can toggle extra features
π‘ Features
-
CSS Modules / SASS Modules / Stylus Modules
-
Proposal Decorators (i)
-
Proposal Class Properties (i)
-
Babel Preset Stage 0 (i)
-
Customizable CSS Modules Local Ident Name
-
Additional bundle attribute (
async|defer|...
) (i) -
Font Loader (
ttf|eot|woff|woff2
) (i)
β How to use it
-
If you have existing project created by
create-react-app
, you can remove defaultreact-scripts
For it, run command:
npm uninstall --save react-scripts
oryarn uninstall react-scripts
-
Next we need install
advanced-react-scripts
:npm install --save-dev advanced-react-scripts
oryarn add advanced-react-scripts
-
Then create
.env
file in the root of project for add any of the configuration options below to enable necessary feature
π§ Configuration Options
Styling
Preprocessors
Feature | Parameter in .env | Type | At default |
---|---|---|---|
SASS | REACT_APP_SASS |
Boolean | FALSE |
Stylus | REACT_APP_STYLUS |
Boolean | FALSE |
CSS Modules
Feature | Parameter in .env | Need file format | Type | At default |
---|---|---|---|---|
CSS Modules | REACT_APP_CSS_MODULES |
[name].module.css |
Boolean | FALSE |
SASS Modules | REACT_APP_SASS_MODULES |
[name].module.(sass/scss) |
Boolean | FALSE |
Stylus Modules | REACT_APP_STYLUS_MODULES |
[name].module.styl |
Boolean | FALSE |
CSS Modules local ident name
Build Type | Parameter in .env | Type | At default |
---|---|---|---|
Development | REACT_APP_DEVELOPMENT_CSS_MODULES_IDENT_NAME |
String | [path]__[name]___[local] |
Production | REACT_APP_PRODUCTION_CSS_MODULES_IDENT_NAME |
String | [local]-[sha512:hash:base32] |
Fonts
Build Type | Parameter in .env | Type | At default |
---|---|---|---|
Font Loader | REACT_APP_FONT_LOADER |
Boolean | FALSE |
Example
@font-face {
font-family: 'Open Sans';
src: local('Open Sans'),
local('Open-Sans'),
url('./../resources/fonts/OpenSans.woff2') format('woff2');
}
Experimental ES features
Presets
Feature | Parameter in .env | Type | At default |
---|---|---|---|
Babel Preset Stage-0 | REACT_APP_BABEL_PRESET_STAGE_0 |
Boolean | FALSE |
Single plugins
Feature | Parameter in .env | Type | At default |
---|---|---|---|
Proposal Decorators | REACT_APP_PROPOSAL_DECORATORS |
Boolean | FALSE |
Proposal Class Properties | REACT_APP_PROPOSAL_CLASS_PROPERTIES |
Boolean | FALSE |
Specific loaders
GraphQL
Feature | Parameter in .env | Type | At default |
---|---|---|---|
GraphQL Loader | REACT_APP_GRAPHQL_LOADER |
Boolean | FALSE |
SVG
Feature | Parameter in .env | Type | At default |
---|---|---|---|
SVG Loader (sprite) | REACT_APP_SVG_SPRITE_LOADER |
Boolean | FALSE |
Example
import twitterIcon from '../assets/twitter.svg';
console.log(twitterIcon); // output 'sprite-[hash].svg#twitter-usage'
<svg>
<use xlinkHref={twitterIcon}></use>
</svg>
Bundle tweaks
Feature | Parameter in .env | Type | At default |
---|---|---|---|
Bundle Attribute | REACT_APP_BUNDLE_ATTRIBUTE |
String | null |
NOTE: works only on production build
Future
We follow updates of original react-scripts
and changes in used packages
We need help us, community! Everyone can take part in the development and suggest the idea, explained in Issue or make your own changes and send in PR. We have no strict rules for your issues. Any wishes are taken into account =)
Changelog
License
Create React App is open source software licensed as MIT.