diff --git a/packages/react-scripts/config/webpack.config.dev.js b/packages/react-scripts/config/webpack.config.dev.js
index 924e3e4f0..bdcfd99ad 100644
--- a/packages/react-scripts/config/webpack.config.dev.js
+++ b/packages/react-scripts/config/webpack.config.dev.js
@@ -220,6 +220,39 @@ 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',
+ }),
+ ],
+ },
+ },
+ require.resolve('sass-loader'),
+ ],
+ },
// "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..be876f3db 100644
--- a/packages/react-scripts/config/webpack.config.prod.js
+++ b/packages/react-scripts/config/webpack.config.prod.js
@@ -247,6 +247,54 @@ 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',
+ }),
+ ],
+ },
+ },
+ require.resolve('sass-loader'),
+ ],
+ },
+ 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..64c3659a3 100644
--- a/packages/react-scripts/package.json
+++ b/packages/react-scripts/package.json
@@ -36,14 +36,15 @@
"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",
"promise": "8.0.1",
"raf": "3.4.0",
- "source-map-loader": "^0.2.1",
"react-dev-utils": "^5.0.1",
"resolve": "1.6.0",
+ "source-map-loader": "^0.2.1",
"style-loader": "0.19.0",
"sw-precache-webpack-plugin": "0.11.4",
"ts-jest": "22.0.1",
@@ -62,6 +63,7 @@
"devDependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4",
+ "sass-loader": "^7.0.3",
"typescript": "^2.7.1"
},
"peerDependencies": {
pFad - Phonifier reborn
Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.
Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.
Alternative Proxies:
Alternative Proxy
pFad Proxy
pFad v3 Proxy
pFad v4 Proxy