feat: support SCSS chunks transformation with webpack (#2)

artkravchenko · Aug 19, 2018 · e4e1ed3 · e4e1ed3
1 parent 94641fa
commit e4e1ed3
Show file tree

Hide file tree

Showing 3 changed files with 400 additions and 20 deletions.
diff --git a/packages/web-client/package.json b/packages/web-client/package.json
@@ -24,9 +24,11 @@
     "eslint-plugin-react": "7.9.1",
     "extract-css-chunks-webpack-plugin": "3.0.11",
     "jest": "23.1.0",
+    "node-sass": "4.9.3",
     "postcss-loader": "3.0.0",
     "postcss-preset-env": "5.3.0",
     "react-hot-loader": "4.3.3",
+    "sass-loader": "7.1.0",
     "stats-webpack-plugin": "0.6.2",
     "uglifyjs-webpack-plugin": "1.2.7",
     "webpack": "4.12.0",

diff --git a/packages/web-client/resources/build/webpack/app.config.js b/packages/web-client/resources/build/webpack/app.config.js
@@ -156,6 +156,27 @@ if (__DEV__) {
             getPostCssLoader(),
           ],
         },
+        {
+          test: /\.scss$/,
+          exclude: /node_modules/,
+          use: [
+            ExtractCssChunksWebpackPlugin.loader,
+            {
+              loader: 'css-loader',
+              options: {
+                importLoaders: 2,
+                sourceMap: true,
+              },
+            },
+            getPostCssLoader(),
+            {
+              loader: 'sass-loader',
+              options: {
+                sourceMap: true,
+              },
+            },
+          ],
+        },
       ],
     },
 
@@ -200,6 +221,25 @@ if (__DEV__) {
               options: { importLoaders: 1 },
             },
             getPostCssLoader(),
+            {
+              loader: 'sass-loader',
+              options: {
+                sourceMap: true,
+              },
+            },
+          ],
+        },
+        {
+          test: /\.scss$/,
+          exclude: /node_modules/,
+          use: [
+            ExtractCssChunksWebpackPlugin.loader,
+            {
+              loader: 'css-loader',
+              options: { importLoaders: 2 },
+            },
+            getPostCssLoader(),
+            'sass-loader',
           ],
         },
       ],