From 8b19ed0e7f26ed40a3631a6a3960eeec07ccc5ba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eetu=20H=C3=A4iv=C3=A4l=C3=A4?= Date: Tue, 10 Oct 2017 13:18:35 +0300 Subject: [PATCH 1/2] Rename the package --- README.md | 6 ++++-- packages/react-scripts/package.json | 6 +++--- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 9eba65f7f..56c77cc08 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,6 @@ -# `react-scripts-ts` [![npm version](https://badge.fury.io/js/react-scripts-ts.svg)](https://badge.fury.io/js/react-scripts-ts) [![Build Status](https://travis-ci.org/wmonk/create-react-app-typescript.svg?branch=master)](https://travis-ci.org/wmonk/create-react-app-typescript) +# `react-scripts-ts-ai` [![Build Status](https://travis-ci.org/andersinno/create-react-app-ai.svg?branch=master)](https://travis-ci.org/andersinno/create-react-app-ai) + +#### This is a fork of [wmonk/create-react-app-typescript](https://github.com/wmonk/create-react-app-typescript) Create React apps (with Typescript) with no build configuration. @@ -9,7 +11,7 @@ _Do you know react and want to try out typescript? Or do you know typescript and ```sh npm install -g create-react-app -create-react-app my-app --scripts-version=react-scripts-ts +create-react-app my-app --scripts-version=react-scripts-ts-ai cd my-app/ npm start ``` diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index 7d690ff5e..be8ff39a9 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -1,14 +1,14 @@ { - "name": "react-scripts-ts", + "name": "react-scripts-ts-ai", "version": "2.7.0", "description": "Configuration and scripts for Create React App.", - "repository": "wmonk/create-react-app", + "repository": "andersinno/create-react-app-ai", "license": "BSD-3-Clause", "engines": { "node": ">=6" }, "bugs": { - "url": "https://github.com/wmonk/create-react-app/issues" + "url": "https://github.com/andersinno/create-react-app-ai/issues" }, "files": [ "bin", From 3841fbd2c893e5fc27f73e67731ec0bdcc5af872 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Eetu=20H=C3=A4iv=C3=A4l=C3=A4?= Date: Tue, 10 Oct 2017 13:19:35 +0300 Subject: [PATCH 2/2] Implement Sass loader to react-scripts webpack config --- .../config/webpack.config.dev.js | 43 +++++++++++++++++ .../config/webpack.config.prod.js | 48 +++++++++++++++++++ packages/react-scripts/package.json | 2 + 3 files changed, 93 insertions(+) diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js index 07c0a3adf..2474aff0e 100644 --- a/packages/react-scripts/config/webpack.config.dev.js +++ b/packages/react-scripts/config/webpack.config.dev.js @@ -183,6 +183,7 @@ module.exports = { loader: require.resolve('css-loader'), options: { importLoaders: 1, + sourceMap: true, }, }, { @@ -190,6 +191,7 @@ module.exports = { options: { // Necessary for external CSS imports to work // https://github.com/facebookincubator/create-react-app/issues/2677 + sourceMap: true, ident: 'postcss', plugins: () => [ require('postcss-flexbugs-fixes'), @@ -207,6 +209,47 @@ module.exports = { }, ], }, + { + test: /\.(sass|scss)$/, + fallback: require.resolve('style-loader'), + use: [ + require.resolve('style-loader'), + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 1, + sourceMap: true, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + sourceMap: true, + ident: 'postcss', + plugins: () => [ + require('postcss-flexbugs-fixes'), + autoprefixer({ + browsers: [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9', // React doesn't support IE8 anyway + ], + flexbox: 'no-2009', + }), + ], + }, + }, + { + loader: require.resolve('sass-loader'), + options: { + sourceMap: true, + }, + }, + ], + }, // "file" loader makes sure those assets get served by WebpackDevServer. // When you `import` an asset, you get its (virtual) filename. // In production, they would get copied to the `build` folder. diff --git a/packages/react-scripts/config/webpack.config.prod.js b/packages/react-scripts/config/webpack.config.prod.js index 9582ee731..dbca6f722 100644 --- a/packages/react-scripts/config/webpack.config.prod.js +++ b/packages/react-scripts/config/webpack.config.prod.js @@ -227,6 +227,54 @@ module.exports = { ), // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. }, + { + test: /\.(sass|scss)$/, + loader: ExtractTextPlugin.extract( + Object.assign( + { + fallback: require.resolve('style-loader'), + use: [ + { + loader: require.resolve('css-loader'), + options: { + importLoaders: 1, + minimize: true, + sourceMap: shouldUseSourceMap, + }, + }, + { + loader: require.resolve('postcss-loader'), + options: { + // Necessary for external CSS imports to work + // https://github.com/facebookincubator/create-react-app/issues/2677 + ident: 'postcss', + plugins: () => [ + require('postcss-flexbugs-fixes'), + autoprefixer({ + browsers: [ + '>1%', + 'last 4 versions', + 'Firefox ESR', + 'not ie < 9', // React doesn't support IE8 anyway + ], + flexbox: 'no-2009', + }), + ], + }, + }, + { + loader: require.resolve('sass-loader'), + options: { + sourceMap: shouldUseSourceMap, + }, + }, + ], + }, + extractTextPluginOptions + ) + ), + // Note: this won't work without `new ExtractTextPlugin()` in `plugins`. + }, // "file" loader makes sure assets end up in the `build` folder. // When you `import` an asset, you get its filename. // This loader don't uses a "test" so it will catch all modules diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json index be8ff39a9..ac285bbb6 100644 --- a/packages/react-scripts/package.json +++ b/packages/react-scripts/package.json @@ -31,11 +31,13 @@ "fs-extra": "3.0.1", "html-webpack-plugin": "2.29.0", "jest": "20.0.4", + "node-sass": "^4.5.3", "object-assign": "4.1.1", "postcss-flexbugs-fixes": "3.2.0", "postcss-loader": "2.0.6", "promise": "8.0.1", "react-dev-utils": "^4.0.1", + "sass-loader": "^6.0.6", "style-loader": "0.18.2", "ts-jest": "^20.0.7", "ts-loader": "^2.2.1",