refactor (#15): Simplify building of SCSS to use rollup, & imports to…

… be able to import via index.scss file

See webpack-contrib/sass-loader#535

package.json

@@ -11,7 +11,7 @@
   "sideEffects": false,
   "scripts": {
     "test": "echo \"TODO: write basic specs\"",
-    "build": "NODE_ENV=production rollup --config rollup.config.js && rm -rf dist/styles && cp -r src/styles dist/styles",
+    "build": "rm -rf dist && NODE_ENV=production rollup --config rollup.config.js",
     "prepublishOnly": "npm test && npm run build && npm run shake",
     "shake": "agadoo dist/index.js",
     "storybook": "start-storybook -p 6006 --docs",
@@ -52,6 +52,7 @@
     "core-js": "^3.6.5",
     "react-is": "^16.13.1",
     "rollup": "^2.26.11",
+    "rollup-plugin-copy": "^3.3.0",
     "rollup-plugin-typescript2": "^0.27.2",
     "rollup-plugin-vue": "^5.1.9",
     "sass-loader": "^10.0.2",

rollup.config.js

@@ -1,5 +1,6 @@
 import typescript from 'rollup-plugin-typescript2'
 import VuePlugin from 'rollup-plugin-vue'
+import copy from 'rollup-plugin-copy'
 
 import pkg from './package.json'
 
@@ -16,6 +17,12 @@ export default {
         typescript(),
         VuePlugin({
             css: false
+        }),
+        copy({
+            // For now, we only support usage of the styling as SCSS mixins, and thus only need to copy over the SCSS without compilation
+            // In the future, we could easily export compiled CSS by request, & perhaps allow for CSS vars replacing SCSS vars for customization in that case
+            targets: [{ src: 'src/**/*.scss', dest: 'dist' }],
+            flatten: false
         })
     ],
 };

src/index.scss

@@ -0,0 +1 @@
+@import './styles/mixins.scss';