add webpack loaders for handing sass as css modules, add raw loader for svg

Author: jscottsmith

package.json

@@ -27,7 +27,14 @@
     "babel-preset-env": "^1.1.8",
     "babel-preset-react": "^6.23.0",
     "cross-env": "^3.1.4",
+    "css-loader": "^0.28.0",
+    "file-loader": "^0.11.1",
     "node-sass": "^4.5.0",
+    "postcss-loader": "^1.3.3",
+    "raw-loader": "^0.5.1",
+    "sass-loader": "^6.0.3",
+    "style-loader": "^0.16.1",
+    "url-loader": "^0.5.8",
     "webpack": "^2.2.1",
     "webpack-node-externals": "^1.5.4"
   }

postcss.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+    plugins: [
+        require('autoprefixer')({
+            browsers: ['last 4 versions'],
+        }),
+    ],
+};

webpack.config.js

@@ -20,6 +20,7 @@ const clientConfig = {
     resolve: {
         alias: {
             'react-scroll-parallax': path.resolve('./src/'),
+            'components': path.resolve('./examples/components/'),
         },
     },
 
@@ -34,6 +35,36 @@ const clientConfig = {
                 loader: 'babel-loader',
                 query: createBabelConfig(),
             },
+            {
+                test: /\.(png|jpg|jpeg|gif|svg|cur)$/,
+                loader: 'url-loader',
+                include: [
+                    path.resolve('./src'),
+                ],
+            },
+            {
+                test: /\.scss$/,
+                include: [
+                    path.resolve('./examples'),
+                ],
+                loaders: [
+                    'style-loader',
+                    {
+                        loader: 'css-loader',
+                        query: {
+                            localIdentName: '[name]_[local]_[hash:base64:3]',
+                            importLoaders: 1,
+                        },
+                    },
+                    'postcss-loader',
+                    {
+                        loader: 'sass-loader',
+                        query: {
+                            outputStyle: 'expanded',
+                        },
+                    },
+                ],
+            },
         ],
     },
 };
@@ -62,6 +93,7 @@ const serverConfig = {
     resolve: {
         alias: {
             'react-scroll-parallax': path.resolve('./src/'),
+            'components': path.resolve('./examples/components/'),
         },
     },
 
@@ -76,6 +108,27 @@ const serverConfig = {
                 loader: 'babel-loader',
                 query: createBabelConfig({ server: true }),
             },
+            {
+                test: /\.scss$/,
+                include: [
+                    path.resolve('./examples'),
+                ],
+                loaders: [
+                    {
+                        loader: 'css-loader/locals',
+                        query: {
+                            localIdentName: '[name]_[local]_[hash:base64:3]',
+                            sourceMap: false,
+                        },
+                    },
+                    'postcss-loader', {
+                        loader: 'sass-loader',
+                        query: {
+                            outputStyle: 'expanded',
+                        },
+                    },
+                ],
+            },
         ],
     },
 };