diff --git a/README.md b/README.md index 84d44767..e288f569 100644 --- a/README.md +++ b/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` diff --git a/build/webpack.dev.js b/build/webpack.dev.js index cc6afc4a..449f6d50 100644 --- a/build/webpack.dev.js +++ b/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$/, - loaders: ['raw-loader'], - exclude: [/redoc-initial-styles\.css$/] + test: /lib[\\\/].*\.scss$/, + loaders: ['raw-loader', "sass"], + 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() ], } diff --git a/package.json b/package.json index 109dc6e6..9adbc4cb 100644 --- a/package.json +++ b/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",