-
Notifications
You must be signed in to change notification settings - Fork 0
DIY repository setup
Martin Corevski edited this page Jun 1, 2018
·
4 revisions
First check this guide
npm i @material-ui/core typeface-roboto @material-ui/icons
# Or with yarn
yarn add @material-ui/core typeface-roboto @material-ui/icons
-
By installing and using Material-UI you won't need isomorphic-style-loader most of the time because MUI has its own *HOC withStyles which take the critical CSS and drops it as style inside the head tag.
npm i react-helmet react-ga
# Or with yarn
yarn add react-helmet react-ga
-
React helmet will help you edit the head tag on a route (component/page) change.
-
React ga lets you easily implement google analytics.
npm i -D ignore-loader
# Or with yarn
yarn add ignore-loader -D
- See the Webpack config update.
- Update the webpack.config.js file.
// File loader for fonts
{
test: /.*(3|4|5)00\.(woff|woff2|eot|ttf|otf)$/,
use: {
loader: 'url-loader',
options: {
// Limit at 10k. Above that emit separate files
limit: 10000,
// url-loader sets mimetype if it's passed.
// Without this it derives it from the file extension
mimetype: 'application/font-woff',
// Output below fonts directory
name: 'assets/fonts/[name].[ext]',
fallback: 'file-loader' // use file loader for size > 10KB
}
}
},
// Ignore fonts
{
test: /.*((\d00.+)|((1|2|6|7|8|9)00))\.(woff|woff2|eot|ttf|otf)$/,
use: {
loader: 'ignore-loader'
}
}
- Inspired by this SO answer I am ignoring all the font types that Material-UI isn't using. Material-UI uses Roboto 300, 400 and 500, docs reference.