feat: switch to Sass for styles

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "./dist/react-big-calendar.js": {
-    "bundled": 561388,
-    "minified": 171351,
-    "gzipped": 50367
+    "bundled": 561648,
+    "minified": 171367,
+    "gzipped": 50382
   },
   "./dist/react-big-calendar.min.js": {
-    "bundled": 497725,
-    "minified": 152002,
-    "gzipped": 45855
+    "bundled": 497985,
+    "minified": 152018,
+    "gzipped": 45872
   },
   "dist/react-big-calendar.esm.js": {
-    "bundled": 169329,
-    "minified": 81452,
-    "gzipped": 20069,
+    "bundled": 169583,
+    "minified": 81478,
+    "gzipped": 20083,
     "treeshaked": {
       "rollup": {
-        "code": 62945,
+        "code": 62961,
         "import_statements": 1466
       },
       "webpack": {
-        "code": 66463
+        "code": 66479
       }
     }
   }

.storybook/webpack.config.js

@@ -1,4 +1,4 @@
-const { rules } = require('webpack-atoms')
+const { rules, loaders, plugins, stats } = require('webpack-atoms')
 
 const browsers = ['last 2 versions', 'ie >= 10']
 
@@ -8,7 +8,7 @@ module.exports = function({ config }) {
     rules.fonts(),
     rules.images(),
     rules.css(),
-    rules.less({ browsers }),
+    rules.sass({ browsers }),
   ]
 
   return config

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,20 @@ 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 SASS files are included with Big Calendar.
+
+```
+  @import 'react-big-calendar/lib/sass/styles';
+  @import 'react-big-calendar/addons/dragAndDrop/styles'; // if using DnD
+```
+
+SASS implementation provides 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.

examples/App.js

@@ -10,9 +10,9 @@ import globalize from 'globalize'
 import 'bootstrap/dist/css/bootstrap.min.css'
 import 'font-awesome/css/font-awesome.min.css'
 
-import 'react-big-calendar/lib/less/styles.less'
-import './styles.less'
-import './prism.less'
+import 'react-big-calendar/lib/sass/styles.scss'
+import './styles.scss'
+import './prism.scss'
 import Card from './Card'
 import ExampleControlSlot from './ExampleControlSlot'
 import Basic from './demos/basic'

examples/Intro.md

@@ -7,7 +7,9 @@ _yarn:_ `yarn add react-big-calendar`
 _npm:_ `npm install --save react-big-calendar`
 
 Styles can be found at: `react-big-calendar/lib/css/react-big-calendar.css`, and should be included on the page
-with the calendar component. Also make sure that your calendar's container
+with the calendar component. Alternatively, you can include the styles directly in your SASS build. See the [Custom Styling](https://github.com/intljusticemission/react-big-calendar/blob/master/README.md#custom-styling) section of the README file for more details.
+
+Also make sure that your calendar's container
 element has a height, or the calendar won't be visible (see why below).
 
 Date internationalization and localization is **hard** and `react-big-calendar` doesn't even attempt to