This repository is fork of react-scripts
with fresh dependency packages and simple webpack modifications that can toggle extra 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)
-
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
Feature | Parameter in .env | Type | At default |
---|---|---|---|
SASS | REACT_APP_SASS |
Boolean | FALSE |
Stylus | REACT_APP_STYLUS |
Boolean | FALSE |
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 |
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] |
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');
}
Feature | Parameter in .env | Type | At default |
---|---|---|---|
Babel Preset Stage-0 | REACT_APP_BABEL_PRESET_STAGE_0 |
Boolean | FALSE |
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 |
Feature | Parameter in .env | Type | At default |
---|---|---|---|
GraphQL Loader | REACT_APP_GRAPHQL_LOADER |
Boolean | FALSE |
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>
Feature | Parameter in .env | Type | At default |
---|---|---|---|
Bundle Attribute | REACT_APP_BUNDLE_ATTRIBUTE |
String | null |
NOTE: works only on production build
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 =)
Create React App is open source software licensed as MIT.