スタイルシートを追加

kaorun343 · kaorun343 · commit 7139338e265b · 2016-12-02T11:39:15.000+09:00
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
+    "bootstrap": "^4.0.0-alpha.5",
     "dexie": "^2.0.0-beta.6",
     "tslib": "^1.2.0",
     "vue": "^2.1.3",
@@ -20,8 +21,11 @@
     "vuex": "^2.0.0"
   },
   "devDependencies": {
+    "css-loader": "^0.26.0",
     "extract-text-webpack-plugin": "^2.0.0-beta.4",
     "html-webpack-plugin": "^2.24.1",
+    "node-sass": "^3.13.0",
+    "sass-loader": "^4.0.2",
     "ts-loader": "^1.2.2",
     "typescript": "^2.1.1",
     "vue-template-compiler": "^2.1.3",
diff --git a/src/Home/Home.template.html b/src/Home/Home.template.html
@@ -1,6 +1,6 @@
 <div>
   <jumbotron></jumbotron>
-  <div class="container">
+  <div class="container page-container">
     <h2>これまでに寄せられたメッセージ</h2>
     <div class="card card-block" v-for="message in messages">
       <div>{{ message.date | format }}</div>
diff --git a/src/Links/Links.template.html b/src/Links/Links.template.html
@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container page-container">
   <h1>リンク一覧</h1>
   <ul>
     <li v-for="link in links">
diff --git a/src/Settings/Settings.template.html b/src/Settings/Settings.template.html
@@ -1,4 +1,4 @@
-<div class="container">
+<div class="container page-container">
   <h1>設定</h1>
   <div>
     <button class="btn btn-primary" @click="reset">メッセージを削除する</button>
diff --git a/src/index.ts b/src/index.ts
@@ -5,6 +5,7 @@ import router from './router'
 import { mapActions } from 'vuex'
 import store from './vuex/store'
 import Navbar from './navbar/navbar'
+import './style.scss'
 
 @Component(template<App>({
   components: {
diff --git a/src/style.scss b/src/style.scss
@@ -0,0 +1,27 @@
+@import "~bootstrap/scss/bootstrap-reboot";
+@import "~bootstrap/scss/mixins";
+
+// @import "~bootstrap/scss/grid";
+.container {
+  @include make-container();
+  @include make-container-max-widths();
+}
+
+.page-container {
+  margin-top: 2rem;
+}
+
+// @import "~bootstrap/scss/utilities/background";
+.bg-faded {
+  background-color: darken($body-bg, 3%);
+}
+
+@import "~bootstrap/scss/buttons";
+@import "~bootstrap/scss/card";
+@import "~bootstrap/scss/close";
+@import "~bootstrap/scss/forms";
+@import "~bootstrap/scss/modal";
+@import "~bootstrap/scss/nav";
+@import "~bootstrap/scss/navbar";
+@import "~bootstrap/scss/type";
+@import "~bootstrap/scss/jumbotron";
diff --git a/template.html b/template.html
@@ -3,7 +3,6 @@
 <head>
   <meta charset="UTF-8">
   <title>Vue.jsとTypeScriptのサンプル2</title>
-  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi" crossorigin="anonymous">
 </head>
 <body>
   <div id="app"></div>

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div class="container">`
	`1`	`+<div class="container page-container">`
`2`	`2`	`<h1>リンク一覧</h1>`
`3`	`3`	`<ul>`
`4`	`4`	`<li v-for="link in links">`