Add scss (#5)

* feat(add-scss): added scss support

package.json

@@ -23,6 +23,7 @@
     "build:storybook": "build-storybook"
   },
   "devDependencies": {
+    "@patternfly/patternfly": "^4.10.27",
     "@storybook/addon-actions": "^5.3.14",
     "@storybook/addon-info": "^5.3.14",
     "@storybook/addon-links": "^5.3.14",
@@ -52,6 +53,7 @@
     "imagemin": "^7.0.0",
     "jest": "^25.1.0",
     "mini-css-extract-plugin": "^0.9.0",
+    "node-sass": "^4.14.1",
     "optimize-css-assets-webpack-plugin": "^5.0.1",
     "prettier": "^1.15.2",
     "prop-types": "^15.6.1",
@@ -62,6 +64,7 @@
     "react-dom": "^16.11.0",
     "regenerator-runtime": "^0.13.3",
     "rimraf": "^3.0.2",
+    "sass-loader": "^8.0.2",
     "style-loader": "^1.1.3",
     "svg-url-loader": "^4.0.0",
     "terser-webpack-plugin": "^2.3.5",

src/app/app.scss

@@ -0,0 +1,3 @@
+html, body, #root {
+  height: 100%;
+}

src/app/index.tsx

@@ -1,9 +1,9 @@
 import * as React from 'react';
 import '@patternfly/react-core/dist/styles/base.css';
+import '@app/app.scss';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { AppLayout } from '@app/AppLayout/AppLayout';
 import { AppRoutes } from '@app/routes';
-import '@app/app.css';
 
 const App: React.FunctionComponent = () => (
   <Router>

src/app/pf-core.scss

@@ -0,0 +1,4 @@
+@import '@patternfly/patternfly/sass-utilities/colors.scss';
+@import '@patternfly/patternfly/sass-utilities/functions.scss';
+@import '@patternfly/patternfly/sass-utilities/mixins.scss';
+@import '@patternfly/patternfly/sass-utilities/scss-variables.scss';

webpack.common.js

@@ -3,6 +3,7 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
 const Dotenv = require('dotenv-webpack');
 const BG_IMAGES_DIRNAME = 'bgimages';
+const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 
 module.exports = env => {
 
@@ -106,7 +107,21 @@ module.exports = env => {
               }
             }
           ]
-        }
+        },
+        {
+          test: /\.s?css$/,
+          use: [
+            {
+              loader: MiniCssExtractPlugin.loader,
+              options: {
+                hmr: process.env.NODE_ENV === 'development',
+                reloadAll: true
+              },
+            },
+            'css-loader',
+            'sass-loader'
+          ],
+        },
       ]
     },
     output: {
@@ -120,6 +135,10 @@ module.exports = env => {
       new Dotenv({
         systemvars: true,
         silent: true
+      }),
+      new MiniCssExtractPlugin({
+        filename: '[name].css',
+        chunkFilename: '[name].bundle.css'
       })
     ],
     resolve: {

webpack.dev.js

@@ -17,24 +17,5 @@ module.exports = merge(common('development'), {
     hot: true,
     overlay: true,
     open: true
-  },
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        include: [
-          path.resolve(__dirname, 'src'),
-          path.resolve(__dirname, 'node_modules/patternfly'),
-          path.resolve(__dirname, 'node_modules/@patternfly/patternfly'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/base.css'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css')
-        ],
-        use: ["style-loader", "css-loader"]
-      }
-    ]
   }
 });

webpack.prod.js

@@ -1,42 +1,8 @@
 const path = require('path');
 const merge = require('webpack-merge');
 const common = require('./webpack.common.js');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
-const TerserJSPlugin = require('terser-webpack-plugin');
 
 module.exports = merge(common('production'), {
   mode: 'production',
-  devtool: 'source-map',
-  optimization: {
-    minimizer: [
-      new TerserJSPlugin({}),
-      new OptimizeCSSAssetsPlugin({})
-    ],
-  },
-  plugins: [
-    new MiniCssExtractPlugin({
-      filename: '[name].css',
-      chunkFilename: '[name].bundle.css'
-    })
-  ],
-  module: {
-    rules: [
-      {
-        test: /\.css$/,
-        include: [
-          path.resolve(__dirname, 'src'),
-          path.resolve(__dirname, 'node_modules/patternfly'),
-          path.resolve(__dirname, 'node_modules/@patternfly/patternfly'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-styles/css'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/styles/base.css'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-core/dist/esm/@patternfly/patternfly'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-core/node_modules/@patternfly/react-styles/css'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-table/node_modules/@patternfly/react-styles/css'),
-          path.resolve(__dirname, 'node_modules/@patternfly/react-inline-edit-extension/node_modules/@patternfly/react-styles/css')
-        ],
-        use: [MiniCssExtractPlugin.loader, 'css-loader']
-      }
-    ]
-  }
+  devtool: 'source-map'
 });