From 9bbf3885af4e925eb2827cad7cadf304243993bf Mon Sep 17 00:00:00 2001 From: Shriyans Date: Thu, 1 Dec 2016 11:46:28 +0900 Subject: [PATCH 1/2] added sass support added sass support --- packages/react-scripts/config/webpack.config.dev.js | 7 +++++++ packages/react-scripts/config/webpack.config.prod.js | 7 +++++++ packages/react-scripts/package.json | 12 +++++++----- 3 files changed, 21 insertions(+), 5 deletions(-) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 8e264d40286..b10c778c61a 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -127,6 +127,7 @@ module.exports = { /\.html$/, /\.(js|jsx)$/, /\.css$/, + /\.(sass|scss)/, /\.json$/ ], loader: 'url', @@ -160,6 +161,12 @@ module.exports = { test: /\.css$/, loader: 'style!css?importLoaders=1!postcss' }, + // Added support for sass + { + test: /\.(sass|scss)/, + exclude: /\.module\.(sass|scss)$/, + loaders: ['style', 'css', 'sass'], + }, // JSON is not enabled by default in Webpack but both Node and Browserify // allow it implicitly so we also enable it. { diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 60016896892..d6b5c508567 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -133,6 +133,7 @@ module.exports = { /\.html$/, /\.(js|jsx)$/, /\.css$/, + /\.(sass|scss)/, /\.json$/ ], loader: 'url', @@ -170,6 +171,12 @@ module.exports = { loader: ExtractTextPlugin.extract('style', 'css?importLoaders=1!postcss') // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, + // Added support for sass + { + test: /\.(sass|scss)/, + exclude: /\.module\.(sass|scss)$/, + loader: ExtractTextPlugin.extract(['css?minimize', 'sass']), + }, // JSON is not enabled by default in Webpack but both Node and Browserify // allow it implicitly so we also enable it. { diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index d0f22bdd934..68f25857ae5 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,14 +1,14 @@ { - "name": "react-scripts", - "version": "0.7.0", + "name": "super-react-scripts", + "version": "0.1.0", "description": "Configuration and scripts for Create React App.", - "repository": "facebookincubator/create-react-app", + "repository": "shrynx/create-react-app", "license": "BSD-3-Clause", "engines": { "node": ">=4" }, "bugs": { - "url": "https://github.com/facebookincubator/create-react-app/issues" + "url": "https://github.com/shrynx/create-react-app/issues" }, "files": [ ".babelrc", @@ -52,14 +52,16 @@ "http-proxy-middleware": "0.17.2", "jest": "17.0.2", "json-loader": "0.5.4", + "node-sass": "^3.13.0", "object-assign": "4.1.0", "path-exists": "2.1.0", "postcss-loader": "1.0.0", "promise": "7.1.1", "react-dev-utils": "^0.3.0", "recursive-readdir": "2.1.0", + "sass-loader": "^4.0.2", "strip-ansi": "3.0.1", - "style-loader": "0.13.1", + "style-loader": "^0.13.1", "url-loader": "0.5.7", "webpack": "1.13.2", "webpack-dev-server": "1.16.2", From f13cba5c3081d11f64685f60beedc29764f2a7c3 Mon Sep 17 00:00:00 2001 From: Shriyans Date: Thu, 1 Dec 2016 11:56:32 +0900 Subject: [PATCH 2/2] added support for webpack dashboard added support for webpack dashboard --- packages/react-scripts/package.json | 1 + packages/react-scripts/scripts/start.js | 170 +++++++++++++----------- 2 files changed, 92 insertions(+), 79 deletions(-) diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 68f25857ae5..cd835f0fe63 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -64,6 +64,7 @@ "style-loader": "^0.13.1", "url-loader": "0.5.7", "webpack": "1.13.2", + "webpack-dashboard": "^0.2.0", "webpack-dev-server": "1.16.2", "webpack-manifest-plugin": "1.1.0", "whatwg-fetch": "1.0.0" diff --git a/packages/react-scripts/scripts/start.js b/packages/react-scripts/scripts/start.js index 752bd8a08a8..ef4cff96d8b 100644 --- a/packages/react-scripts/scripts/start.js +++ b/packages/react-scripts/scripts/start.js @@ -25,16 +25,18 @@ var httpProxyMiddleware = require('http-proxy-middleware'); var detect = require('detect-port'); var clearConsole = require('react-dev-utils/clearConsole'); var checkRequiredFiles = require('react-dev-utils/checkRequiredFiles'); -var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); +// var formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); var getProcessForPort = require('react-dev-utils/getProcessForPort'); var openBrowser = require('react-dev-utils/openBrowser'); var prompt = require('react-dev-utils/prompt'); -var pathExists = require('path-exists'); +// var pathExists = require('path-exists'); var config = require('../config/webpack.config.dev'); var paths = require('../config/paths'); +var Dashboard = require('webpack-dashboard'); +var DashboardPlugin = require('webpack-dashboard/plugin'); -var useYarn = pathExists.sync(paths.yarnLockFile); -var cli = useYarn ? 'yarn' : 'npm'; +// var useYarn = pathExists.sync(paths.yarnLockFile); +// var cli = useYarn ? 'yarn' : 'npm'; var isInteractive = process.stdout.isTTY; // Warn and crash if required files are missing @@ -61,6 +63,10 @@ if (isSmokeTest) { } function setupCompiler(host, port, protocol) { + // Create new dashboard for webpack-dashboard + var dashboard = new Dashboard(); + // push the dashboard plugin to config before compiling + config.plugins.push(new DashboardPlugin(dashboard.setData)) // "Compiler" is a low-level interface to Webpack. // It lets us listen to some events and provide our own custom messages. compiler = webpack(config, handleCompile); @@ -69,70 +75,72 @@ function setupCompiler(host, port, protocol) { // recompiling a bundle. WebpackDevServer takes care to pause serving the // bundle, so if you refresh, it'll wait instead of serving the old one. // "invalid" is short for "bundle invalidated", it doesn't imply any errors. - compiler.plugin('invalid', function() { - if (isInteractive) { - clearConsole(); - } - console.log('Compiling...'); - }); - - var isFirstCompile = true; - - // "done" event fires when Webpack has finished recompiling the bundle. - // Whether or not you have warnings or errors, you will get this event. - compiler.plugin('done', function(stats) { - if (isInteractive) { - clearConsole(); - } - - // We have switched off the default Webpack output in WebpackDevServer - // options so we are going to "massage" the warnings and errors and present - // them in a readable focused way. - var messages = formatWebpackMessages(stats.toJson({}, true)); - var isSuccessful = !messages.errors.length && !messages.warnings.length; - var showInstructions = isSuccessful && (isInteractive || isFirstCompile); - - if (isSuccessful) { - console.log(chalk.green('Compiled successfully!')); - } - - if (showInstructions) { - console.log(); - console.log('The app is running at:'); - console.log(); - console.log(' ' + chalk.cyan(protocol + '://' + host + ':' + port + '/')); - console.log(); - console.log('Note that the development build is not optimized.'); - console.log('To create a production build, use ' + chalk.cyan(cli + ' run build') + '.'); - console.log(); - isFirstCompile = false; - } - // If errors exist, only show errors. - if (messages.errors.length) { - console.log(chalk.red('Failed to compile.')); - console.log(); - messages.errors.forEach(message => { - console.log(message); - console.log(); - }); - return; - } - - // Show warnings if no errors were found. - if (messages.warnings.length) { - console.log(chalk.yellow('Compiled with warnings.')); - console.log(); - messages.warnings.forEach(message => { - console.log(message); - console.log(); - }); - // Teach some ESLint tricks. - console.log('You may use special comments to disable some warnings.'); - console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.'); - console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.'); - } - }); + // Disabling create-react-app custom messages + // compiler.plugin('invalid', function() { + // if (isInteractive) { + // clearConsole(); + // } + // console.log('Compiling...'); + // }); + // + // var isFirstCompile = true; + // + // // "done" event fires when Webpack has finished recompiling the bundle. + // // Whether or not you have warnings or errors, you will get this event. + // compiler.plugin('done', function(stats) { + // if (isInteractive) { + // clearConsole(); + // } + // + // // We have switched off the default Webpack output in WebpackDevServer + // // options so we are going to "massage" the warnings and errors and present + // // them in a readable focused way. + // var messages = formatWebpackMessages(stats.toJson({}, true)); + // var isSuccessful = !messages.errors.length && !messages.warnings.length; + // var showInstructions = isSuccessful && (isInteractive || isFirstCompile); + // + // if (isSuccessful) { + // console.log(chalk.green('Compiled successfully!')); + // } + // + // if (showInstructions) { + // console.log(); + // console.log('The app is running at:'); + // console.log(); + // console.log(' ' + chalk.cyan(protocol + '://' + host + ':' + port + '/')); + // console.log(); + // console.log('Note that the development build is not optimized.'); + // console.log('To create a production build, use ' + chalk.cyan(cli + ' run build') + '.'); + // console.log(); + // isFirstCompile = false; + // } + // + // // If errors exist, only show errors. + // if (messages.errors.length) { + // console.log(chalk.red('Failed to compile.')); + // console.log(); + // messages.errors.forEach(message => { + // console.log(message); + // console.log(); + // }); + // return; + // } + // + // // Show warnings if no errors were found. + // if (messages.warnings.length) { + // console.log(chalk.yellow('Compiled with warnings.')); + // console.log(); + // messages.warnings.forEach(message => { + // console.log(message); + // console.log(); + // }); + // // Teach some ESLint tricks. + // console.log('You may use special comments to disable some warnings.'); + // console.log('Use ' + chalk.yellow('// eslint-disable-next-line') + ' to ignore the next line.'); + // console.log('Use ' + chalk.yellow('/* eslint-disable */') + ' to ignore all warnings in a file.'); + // } + // }); } // We need to provide a custom onError function for httpProxyMiddleware. @@ -140,15 +148,17 @@ function setupCompiler(host, port, protocol) { function onProxyError(proxy) { return function(err, req, res){ var host = req.headers && req.headers.host; - console.log( - chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) + - ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.' - ); - console.log( - 'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' + - chalk.cyan(err.code) + ').' - ); - console.log(); + // hiding proxy error messages till webpack dashboard allows message pushing + + // console.log( + // chalk.red('Proxy error:') + ' Could not proxy request ' + chalk.cyan(req.url) + + // ' from ' + chalk.cyan(host) + ' to ' + chalk.cyan(proxy) + '.' + // ); + // console.log( + // 'See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (' + + // chalk.cyan(err.code) + ').' + // ); + // console.log(); // And immediately send the proper error response to the client. // Otherwise, the request will eventually timeout with ERR_EMPTY_RESPONSE on the client side. @@ -182,9 +192,11 @@ function addMiddleware(devServer) { })); if (proxy) { if (typeof proxy !== 'string') { - console.log(chalk.red('When specified, "proxy" in package.json must be a string.')); - console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".')); - console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.')); + // hiding proxy error messages till webpack dashboard allows message pushing + + // console.log(chalk.red('When specified, "proxy" in package.json must be a string.')); + // console.log(chalk.red('Instead, the type of "proxy" was "' + typeof proxy + '".')); + // console.log(chalk.red('Either remove "proxy" from package.json, or make it a string.')); process.exit(1); }