Fix dev servers and scss files (fixes #97)

README.md

@@ -132,10 +132,6 @@ Redoc.init('http://petstore.swagger.io/v2/swagger.json', {
 `cd ReDoc`
 - Install dependencies
 `npm install`
-- *(Temporary step, will be obsolete after fixing #97)* Compile CSS
-```bash
-npm run build:sass
-```
 - _(optional)_ Replace `demo/swagger.yaml` with your own schema
 - Start the server
 `npm start`

build/webpack.dev.js

@@ -1,5 +1,6 @@
 const webpack = require('webpack');
 const ForkCheckerPlugin = require('awesome-typescript-loader').ForkCheckerPlugin;
+const StringReplacePlugin = require("string-replace-webpack-plugin");
 
 const root = require('./helpers').root;
 const VERSION = JSON.stringify(require('../package.json').version);
@@ -62,6 +63,28 @@ module.exports = {
       exclude: [
         /node_modules/
       ]
+    }, {
+      enforce: 'pre',
+      test: /\.ts$/,
+      exclude: [
+        /node_modules/
+      ],
+      loader: StringReplacePlugin.replace({
+        replacements: [
+          {
+            pattern: /styleUrls:\s*\[\s*'([\w\.\/-]*)\.css'\s*\][\s,]*$/m,
+            replacement: function (match, p1, offset, string) {
+              return `styleUrls: ['${p1}.scss'],`;
+            }
+          },
+          {
+            pattern: /(\.\/components\/Redoc\/redoc-initial-styles\.css)/m,
+            replacement: function (match, p1, offset, string) {
+              return p1.replace('.css', '.scss');
+            }
+          }
+        ]
+      })
     }, {
       test: /\.ts$/,
       loaders: [
@@ -70,13 +93,16 @@ module.exports = {
       ],
       exclude: [/\.(spec|e2e)\.ts$/]
     }, {
-      test: /lib[\\\/].*\.css$/,
+      test: /lib[\\\/].*\.scss$/,
-      loaders: ['raw-loader'],
+      loaders: ['raw-loader', "sass"],
-      exclude: [/redoc-initial-styles\.css$/]
+      exclude: [/redoc-initial-styles\.scss$/]
+    }, {
+      test: /\.scss$/,
+      loaders: ['style', 'css?-import', "sass"],
+      exclude: [/lib[\\\/](?!.*redoc-initial-styles).*\.scss$/]
     }, {
       test: /\.css$/,
       loaders: ['style', 'css?-import'],
-      exclude: [/lib[\\\/](?!.*redoc-initial-styles).*\.css$/]
     }, {
       test: /\.html$/,
       loader: 'raw-loader'
@@ -97,6 +123,8 @@ module.exports = {
       'AOT': IS_PRODUCTION
     }),
 
-    new ForkCheckerPlugin()
+    new ForkCheckerPlugin(),
+
+    new StringReplacePlugin()
   ],
 }

package.json

@@ -82,15 +82,17 @@
     "karma-sinon": "^1.0.4",
     "karma-sourcemap-loader": "^0.3.7",
     "karma-webpack": "^1.8.0",
-    "node-sass": "^3.8.0",
+    "node-sass": "^3.10.1",
     "phantomjs-prebuilt": "^2.1.7",
     "protractor": "^4.0.10",
     "raw-loader": "^0.5.1",
     "rxjs": "5.0.0-beta.12",
+    "sass-loader": "^4.0.2",
     "shelljs": "^0.7.0",
     "should": "^11.1.0",
     "sinon": "^1.17.2",
     "source-map-loader": "^0.1.5",
+    "string-replace-webpack-plugin": "0.0.4",
     "style-loader": "^0.13.1",
     "ts-helpers": "^1.1.1",
     "tslint": "^3.15.1",