Provide SASS implementation of styles

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "./dist/react-big-calendar.js": {
-    "bundled": 471349,
-    "minified": 153211,
-    "gzipped": 42302
+    "bundled": 457249,
+    "minified": 146919,
+    "gzipped": 41972
   },
   "./dist/react-big-calendar.min.js": {
-    "bundled": 414053,
-    "minified": 136181,
-    "gzipped": 38428
+    "bundled": 395236,
+    "minified": 128237,
+    "gzipped": 37759
   },
   "dist/react-big-calendar.esm.js": {
-    "bundled": 168039,
-    "minified": 80688,
-    "gzipped": 19864,
+    "bundled": 168842,
+    "minified": 81179,
+    "gzipped": 20015,
     "treeshaked": {
       "rollup": {
-        "code": 62227,
+        "code": 62803,
         "import_statements": 1470
       },
       "webpack": {
-        "code": 65735
+        "code": 66315
       }
     }
   }

.storybook/webpack.config.js

@@ -1,15 +1,22 @@
-const { rules } = require('webpack-atoms')
+const { rules, loaders, plugins, stats } = require('webpack-atoms')
 
 const browsers = ['last 2 versions', 'ie >= 10']
 
-module.exports = function({ config }) {
-  config.module.rules = [
-    rules.js(),
-    rules.fonts(),
-    rules.images(),
-    rules.css(),
-    rules.less({ browsers }),
-  ]
-
-  return config
+module.exports = function(config) {
+  return {
+    ...config,
+    module: {
+      rules: [
+        rules.js(),
+        rules.fonts(),
+        rules.images(),
+        rules.css(),
+        rules.less({ browsers }),
+        // When you want to test SASS, comment out the LESS 'rule'
+        // and enable the SASS 'rule'
+        //rules.sass({ browsers }),
+      ],
+    },
+    plugins: [...config.plugins],
+  }
 }

README.md

@@ -11,7 +11,7 @@ Inspired by [Full Calendar](http://fullcalendar.io/).
 `yarn add react-big-calendar` or `npm install --save react-big-calendar`
 
 Include `react-big-calendar/lib/css/react-big-calendar.css` for styles, and make sure your calendar's container
-element has a height, or the calendar won't be visible.
+element has a height, or the calendar won't be visible. To provide your own custom styling, see the [Custom Styling](#custom-styling) topic.
 
 ## Starters
 
@@ -76,6 +76,25 @@ const MyCalendar = props => (
 )
 ```
 
+## Custom Styling
+
+Out of the box you can include the compiled css files and be up and running. But, sometimes, you may want to style
+Big Calendar to match your application styling. For this reason LESS and SASS files are included with Big Calendar.
+
+```
+  // For LESS
+  @import 'react-big-calendar/lib/less/styles.less';
+  @import 'react-big-calendar/addons/dragAndDrop/styles.less';
+
+  // For SASS
+  @import 'react-big-calendar/lib/sass/styles';
+  @import 'react-big-calendar/addons/dragAndDrop/styles';
+```
+
+Both LESS and SASS implementations provide a `variables` file containing color and sizing variables that you can
+update to fit your application. _Note:_ Changing and/or overriding styles can cause rendering issues with your
+Big Calendar. Carefully test each change accordingly.
+
 ## Join us on Reactiflux Discord
 
 Join us on [Reactiflux Discord](https://discord.gg/uJsgpkC) community under the channel #react-big-calendar if you have any questions.