From 1c74da5ab72b9c1d4a134e74ba430f6d1af23aec Mon Sep 17 00:00:00 2001
From: Filip Dabrowski <filip.dabrowski@theaa.com>
Date: Thu, 12 Jul 2018 17:01:43 +0100
Subject: [PATCH 1/3] Add SASS support
---
.../config/webpack.config.dev.js | 39 ++++++++++++++
.../config/webpack.config.prod.js | 54 +++++++++++++++++++
packages/react-scripts/package.json | 3 +-
3 files changed, 95 insertions(+), 1 deletion(-)
diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 924e3e4f0..6ed8feea9 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -188,6 +188,7 @@ module.exports = {
// "style" loader turns CSS into JS modules that inject <style> tags.
// In production, we use a plugin to extract that CSS to a file, but
// in development "style" loader enables hot editing of CSS.
+ // SASS/SCSS supported.
{
test: /\.css$/,
use: [
@@ -220,6 +221,44 @@ module.exports = {
},
],
},
+ {
+ test: /\.scss$/,
+ use: [
+ require.resolve('style-loader'),
+ {
+ loader: require.resolve('css-loader'),
+ options: {
+ importLoaders: 1,
+ },
+ },
+ {
+ 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: {
+ importLoaders: 1,
+ },
+ },
+ ],
+ },
// "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 7cb33afd0..1a9238579 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -200,6 +200,7 @@ module.exports = {
// tags. If you use code splitting, however, any async bundles will still
// use the "style" loader inside the async code so CSS from them won't be
// in the main CSS file.
+ // SASS/SCSS supported.
{
test: /\.css$/,
loader: ExtractTextPlugin.extract(
@@ -247,6 +248,59 @@ module.exports = {
),
// Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
},
+ {
+ test: /\.scss$/,
+ loader: ExtractTextPlugin.extract(
+ Object.assign(
+ {
+ fallback: {
+ loader: require.resolve('style-loader'),
+ options: {
+ hmr: false,
+ },
+ },
+ 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: {
+ importLoaders: 1,
+ },
+ },
+ ],
+ },
+ 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 doesn't use a "test" so it will catch all modules
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 95bf68c2a..6719ae0c9 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -41,9 +41,10 @@
"postcss-loader": "2.0.8",
"promise": "8.0.1",
"raf": "3.4.0",
- "source-map-loader": "^0.2.1",
"react-dev-utils": "^5.0.1",
"resolve": "1.6.0",
+ "sass-loader": "^7.0.3",
+ "source-map-loader": "^0.2.1",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"ts-jest": "22.0.1",
From cb96b560415aa17390c0cdb5755b4ffea1f40f61 Mon Sep 17 00:00:00 2001
From: Filip Dabrowski <filip.dabrowski@theaa.com>
Date: Fri, 13 Jul 2018 14:23:39 +0100
Subject: [PATCH 2/3] Add node-sass dependency
---
packages/react-scripts/package.json | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index 6719ae0c9..bde811b88 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -36,6 +36,7 @@
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "22.4.2",
+ "node-sass": "^4.9.2",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",
From c6e7aaaa2697622a12d9b8eb63377adae2884644 Mon Sep 17 00:00:00 2001
From: Filip Dabrowski <fifofil@gmail.com>
Date: Tue, 17 Jul 2018 14:35:27 +0100
Subject: [PATCH 3/3] Replace node-sass with node-sass-chokidar
---
packages/react-scripts/package.json | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/packages/react-scripts/package.json b/packages/react-scripts/package.json
index bde811b88..60a881288 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -36,7 +36,7 @@
"fs-extra": "3.0.1",
"html-webpack-plugin": "2.29.0",
"jest": "22.4.2",
- "node-sass": "^4.9.2",
+ "node-sass-chokidar": "1.3.0",
"object-assign": "4.1.1",
"postcss-flexbugs-fixes": "3.2.0",
"postcss-loader": "2.0.8",