Ray Burgemeestre
6 年之前
+ 31
- 0
dist/index.html
查看文件
| @@ -2,11 +2,42 @@ | |||
| <html> | |||
| <head> | |||
| <title>Getting Started</title> | |||
| <link rel="stylesheet" href="css/mystyles.css"> | |||
| </head> | |||
| <body> | |||
| <div id="container" style="width:800px; height:600px;"></div> | |||
| <script src="main.js"></script> | |||
| <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> | |||
| </html> | |||
+ 2
- 0
src/index.js
查看文件
| @@ -2,6 +2,8 @@ import _ from 'lodash'; | |||
| import * as monaco from 'monaco-editor'; | |||
| import { initVimMode } from 'monaco-vim'; | |||
| require('./mystyles.scss'); | |||
| function component() { | |||
| let element = document.createElement('div'); | |||
+ 2
- 0
src/mystyles.scss
查看文件
| @@ -0,0 +1,2 @@ | |||
| @charset "utf-8"; | |||
| @import "~bulma/bulma"; | |||
+ 17
- 4
webpack.config.js
查看文件
| @@ -1,5 +1,6 @@ | |||
| const path = require('path'); | |||
| const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); | |||
| const ExtractTextPlugin = require("extract-text-webpack-plugin"); | |||
| module.exports = { | |||
| entry: './src/index.js', | |||
| @@ -9,12 +10,24 @@ module.exports = { | |||
| }, | |||
| module: { | |||
| 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: [ | |||
| new MonacoWebpackPlugin() | |||
| new MonacoWebpackPlugin(), | |||
| new ExtractTextPlugin('css/mystyles.css'), | |||
| ] | |||
| }; | |||
Loading…