css in js

config/webpack.common.js

@@ -27,7 +27,8 @@ module.exports = function (options) {
       'legacy-form':          './resource/js/legacy/crowi-form',
       'legacy-admin':         './resource/js/legacy/crowi-admin',
       'legacy-presentation':  './resource/js/legacy/crowi-presentation',
-      'plugin':               './resource/js/plugin.js',
+      'plugin':               './resource/js/plugin',
+      'style':                './resource/styles',
     },
     resolve: {
       extensions: ['.js', '.json'],

lib/views/layout/layout.html

@@ -22,13 +22,25 @@
   <link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
   <link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
 
-  <link rel="stylesheet" href="/css/crowi{% if env  == 'production' %}.min{% endif %}.css">
-
   {% if env === 'development' %}
     <script src="/js/dll/vendor.dll.js"></script>
   {% endif %}
+
   <script src="{{ webpack_asset('commons').js }}"></script>
 
+  {% if env === 'development' %}
+    <script src="{{ webpack_asset('style').js }}"></script>
+  {% else %}
+    <link rel="stylesheet" href="/css/style.css">
+  {% endif %}
+
+  {% if config.crowi['plugin:isEnabledPlugins'] %}
+    <script src="{{ webpack_asset('plugin').js }}" defer></script>
+  {% endif %}
+  <script src="{{ webpack_asset('legacy').js }}" defer></script>
+  <script src="{{ webpack_asset('app').js }}" defer></script>
+
+  <!-- Google Fonts -->
   <link href='//fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
   <!-- Font Awesome -->
   <link href='//cdn.jsdelivr.net/fontawesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'>
@@ -149,9 +161,4 @@
 </body>
 {% endblock %}
 
-{% if config.crowi['plugin:isEnabledPlugins'] %}
-<script src="{{ webpack_asset('plugin').js }}"></script>
-{% endif %}
-<script src="{{ webpack_asset('legacy').js }}"></script>
-<script src="{{ webpack_asset('app').js }}"></script>
 </html>

resource/css/crowi.scss

@@ -2,7 +2,8 @@
 @import 'utilities';
 
 // import bootstrap
-@import 'bootstrap';
+$bootstrap-sass-asset-helper: true;
+@import "~bootstrap-sass/assets/stylesheets/bootstrap";
 
 // crowi component
 @import 'layout';

resource/js/app.js

@@ -35,7 +35,7 @@ if (isEnabledPlugins) {
   var crowiPlugin = window.crowiPlugin;
   crowiPlugin.installAll(crowi, crowiRenderer);
 }
-  
+
 const componentMappings = {
   'search-top': <HeaderSearchBox />,
   'search-page': <SearchPage />,