Enable sass-loader

package.json

@@ -31,8 +31,10 @@
     "faker": "^4.1.0",
     "file-loader": "^0.11.2",
     "jest": "^20.0.4",
+    "node-sass": "^4.5.3",
     "react-styleguidist": "^6.0.8",
     "react-test-renderer": "^15.6.1",
+    "sass-loader": "^6.0.6",
     "style-loader": "^0.18.2",
     "webpack": "^3.5.5",
     "webpack-node-externals": "^1.6.0",

src/atoms/Checkbox.local.css

@@ -4,11 +4,11 @@
   cursor: pointer;
 }
 
-.inline {
+.root.inline {
   display: inline-flex;
 }
 
-.inline:not(:last-child) {
+.root.inline:not(:last-child) {
   margin-right: 1rem;
 }
 

webpack.config.js

@@ -4,6 +4,11 @@ process.env.NODE_ENV = 'development'
 const path = require('path')
 const nodeExternals = require('webpack-node-externals')
 
+const include = [
+  path.join(__dirname, 'src'),
+  /xpub-[^/]+\/src/,
+]
+
 module.exports = {
   entry: './src/index.js',
   output: {
@@ -24,10 +29,7 @@ module.exports = {
           // ES6 modules
           {
             test: /\.js$/,
-            include: [
-              path.join(__dirname, 'src'),
-              /xpub-[^/]+\/src/,
-            ],
+            include,
             loader: 'babel-loader',
             options: {
               presets: [
@@ -42,10 +44,7 @@ module.exports = {
           // CSS modules
           {
             test: /\.local\.css$/,
-            include: [
-              path.join(__dirname, 'src'),
-              /xpub-[^/]+\/src/,
-            ],
+            include,
             use: [
               'style-loader',
               {
@@ -57,7 +56,24 @@ module.exports = {
             ],
           },
 
-          // CSS
+          // SCSS modules
+          {
+            test: /\.local\.scss$/,
+            include,
+            use: [
+              'style-loader',
+              {
+                loader: 'css-loader',
+                options: {
+                  modules: true,
+                  importLoaders: 1
+                }
+              },
+              'sass-loader'
+            ],
+          },
+
+          // global CSS
           {
             test: /\.css$/,
             use: [
@@ -66,6 +82,21 @@ module.exports = {
             ],
           },
 
+          // global SCSS
+          {
+            test: /\.scss$/,
+            use: [
+              'style-loader',
+              {
+                loader: 'css-loader',
+                options: {
+                  importLoaders: 1
+                }
+              },
+              'sass-loader'
+            ],
+          },
+
           // Files
           {
             exclude: [/\.js$/, /\.html$/, /\.json$/],