- Instale as dependências:
 
yarn add webpack babel-core babel-loader babel-preset-env- Crie o arquivo de configuração do webpack:
 
touch webpack.config.jsyarn add webpack babel-core babel-loader babel-preset-envtouch webpack.config.js| <!-- Material Design Lite files above. --> | |
| <link rel="stylesheet" href="./node_modules/mdl-stepper/stepper.min.css"> | |
| <script defer src="./node_modules/mdl-stepper.min.js"></script> | 
| npm install --save mdl-stepper | 
| # First, make sure that you have SASS installed (http://sass-lang.com/install). | |
| sass --version | |
| # $ Sass x.x.x | |
| # Inside mdl-stepper/ folder. | |
| cd src | |
| # ~/mdl-stepper/src | |
| # Build a development version of css changes. | |
| sass mdl-stepper.scss:../stepper.css | |
| # Build a production version of css changes. | |
| sass mdl-stepper.scss:../stepper.min.css --style compressed | 
| # Inside mdl-stepper/ folder. | |
| # Install dev dependencies. | |
| npm install | |
| # Build a development version of javascript changes. | |
| npm run dev | |
| # Build a production version of javascript changes. | |
| npm run prod | |
| # Build a production version of javascript changes on WINDOWS. | |
| # npm run prod-windows | 
| # Clone the Stepper source code. | |
| git clone [email protected]:axdemelas/mdl-stepper.git | |
| # Go to created folder. | |
| cd mdl-stepper | 
| <!-- style --> | |
| <style> | |
| .mdl-stepper > .mdl-step > .mdl-step__content:not(#demo-error-state-content) { | |
| background-color: rgba(0,0,0,0.2); | |
| } | |
| </style> | |
| <!-- markup --> | |
| <ul class="mdl-stepper mdl-stepper--linear" id="demo-error-state"> | |
| <li class="mdl-step"> | 
| <!-- style --> | |
| <style> | |
| .mdl-stepper > .mdl-step > .mdl-step__content { | |
| background-color: rgba(0,0,0,0.2); | |
| } | |
| </style> | |
| <!-- markup --> | |
| <ul class="mdl-stepper mdl-stepper--linear" id="demo-optional-steps"> | |
| <li class="mdl-step"> | 
| <!-- style --> | |
| <style> | |
| .mdl-stepper > .mdl-step > .mdl-step__content { | |
| background-color: rgba(0,0,0,0.2); | |
| } | |
| </style> | |
| <!-- markup --> | |
| <ul class="mdl-stepper mdl-stepper--linear" id="demo-editable-steps"> | |
| <li class="mdl-step mdl-step--editable"> | 
| <!-- style --> | |
| <style> | |
| .mdl-stepper > .mdl-step > .mdl-step__content { | |
| background-color: rgba(0,0,0,0.2); | |
| } | |
| </style> | |
| <!-- markup --> | |
| <ul class="mdl-stepper mdl-stepper--feedback mdl-stepper--linear" id="demo-stepper-feedback"> | |
| <li class="mdl-step"> |