Ray Burgemeestre
6 years ago
4 changed files with 52 additions and 4 deletions
+ 31
- 0
dist/index.html
View File
| <html> | <html> | ||||
| <head> | <head> | ||||
| <title>Getting Started</title> | <title>Getting Started</title> | ||||
| <link rel="stylesheet" href="css/mystyles.css"> | |||||
| </head> | </head> | ||||
| <body> | <body> | ||||
| <div id="container" style="width:800px; height:600px;"></div> | <div id="container" style="width:800px; height:600px;"></div> | ||||
| <script src="main.js"></script> | <script src="main.js"></script> | ||||
| <div id="my-statusbar"></div> | <div id="my-statusbar"></div> | ||||
| <h1 class="title"> | |||||
| Bulma | |||||
| </h1> | |||||
| <p class="subtitle"> | |||||
| Modern CSS framework based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox">Flexbox</a> | |||||
| </p> | |||||
| <div class="field"> | |||||
| <div class="control"> | |||||
| <input class="input" type="text" placeholder="Input"> | |||||
| </div> | |||||
| </div> | |||||
| <div class="field"> | |||||
| <p class="control"> | |||||
| <span class="select"> | |||||
| <select> | |||||
| <option>Select dropdown</option> | |||||
| </select> | |||||
| </span> | |||||
| </p> | |||||
| </div> | |||||
| <div class="buttons"> | |||||
| <a class="button is-primary">Primary</a> | |||||
| <a class="button is-link">Link</a> | |||||
| </div> | |||||
| </body> | </body> | ||||
| </html> | </html> | ||||
+ 2
- 0
src/index.js
View File
| import * as monaco from 'monaco-editor'; | import * as monaco from 'monaco-editor'; | ||||
| import { initVimMode } from 'monaco-vim'; | import { initVimMode } from 'monaco-vim'; | ||||
| require('./mystyles.scss'); | |||||
| function component() { | function component() { | ||||
| let element = document.createElement('div'); | let element = document.createElement('div'); | ||||
+ 2
- 0
src/mystyles.scss
View File
| @charset "utf-8"; | |||||
| @import "~bulma/bulma"; |
+ 17
- 4
webpack.config.js
View File
| const path = require('path'); | const path = require('path'); | ||||
| const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); | const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); | ||||
| const ExtractTextPlugin = require("extract-text-webpack-plugin"); | |||||
| module.exports = { | module.exports = { | ||||
| entry: './src/index.js', | entry: './src/index.js', | ||||
| }, | }, | ||||
| module: { | module: { | ||||
| rules: [{ | rules: [{ | ||||
| test: /\.css$/, | |||||
| use: ['style-loader', 'css-loader'] | |||||
| }] | |||||
| test: /\.scss$/, | |||||
| use: ExtractTextPlugin.extract({ | |||||
| fallback: 'style-loader', | |||||
| use: [ | |||||
| 'css-loader', | |||||
| 'sass-loader' | |||||
| ] | |||||
| }) | |||||
| }, | |||||
| { | |||||
| test: /\.css$/, | |||||
| use: ['style-loader', 'css-loader'] | |||||
| } | |||||
| ] | |||||
| }, | }, | ||||
| plugins: [ | plugins: [ | ||||
| new MonacoWebpackPlugin() | |||||
| new MonacoWebpackPlugin(), | |||||
| new ExtractTextPlugin('css/mystyles.css'), | |||||
| ] | ] | ||||
| }; | }; | ||||
Loading…