diff --git a/packages/toolkit/config/__tests__/__snapshots__/webpack.config.js.snap b/packages/toolkit/config/__tests__/__snapshots__/webpack.config.js.snap
index d61ceccb..aa6ae1f6 100644
--- a/packages/toolkit/config/__tests__/__snapshots__/webpack.config.js.snap
+++ b/packages/toolkit/config/__tests__/__snapshots__/webpack.config.js.snap
@@ -66,7 +66,7 @@ Object {
         ],
       },
       Object {
-        "include": undefined,
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
         "test": /\\\\\\.css\\$/,
         "use": Array [
           Object {
@@ -88,6 +88,7 @@ Object {
         ],
       },
       Object {
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
         "test": /\\\\\\.\\(sc\\|sa\\)ss\\$/,
         "use": Array [
           Object {
@@ -100,6 +101,29 @@ Object {
               "url": true,
             },
           },
+          Object {
+            "loader": "/node_modules/sass-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+            },
+          },
+        ],
+      },
+      Object {
+        "test": /\\\\\\.module\\\\\\.css\\$/,
+        "use": Array [
+          Object {
+            "loader": "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          },
+          Object {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": Object {
+              "import": false,
+              "modules": true,
+              "sourceMap": true,
+              "url": true,
+            },
+          },
           Object {
             "loader": "/node_modules/postcss-loader/dist/cjs.js",
             "options": Object {
@@ -203,10 +227,7 @@ Object {
         ],
       },
       Object {
-        "include": Array [
-          "/assets2/css",
-          "/includes2/blocks",
-        ],
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
         "test": /\\\\\\.css\\$/,
         "use": Array [
           Object {
@@ -228,6 +249,7 @@ Object {
         ],
       },
       Object {
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
         "test": /\\\\\\.\\(sc\\|sa\\)ss\\$/,
         "use": Array [
           Object {
@@ -240,6 +262,29 @@ Object {
               "url": false,
             },
           },
+          Object {
+            "loader": "/node_modules/sass-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+            },
+          },
+        ],
+      },
+      Object {
+        "test": /\\\\\\.module\\\\\\.css\\$/,
+        "use": Array [
+          Object {
+            "loader": "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          },
+          Object {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": Object {
+              "import": false,
+              "modules": true,
+              "sourceMap": true,
+              "url": false,
+            },
+          },
           Object {
             "loader": "/node_modules/postcss-loader/dist/cjs.js",
             "options": Object {
@@ -389,7 +434,7 @@ Object {
         ],
       },
       Object {
-        "include": undefined,
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
         "test": /\\\\\\.css\\$/,
         "use": Array [
           Object {
@@ -413,6 +458,7 @@ Object {
         ],
       },
       Object {
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
         "test": /\\\\\\.\\(sc\\|sa\\)ss\\$/,
         "use": Array [
           Object {
@@ -425,6 +471,29 @@ Object {
               "url": true,
             },
           },
+          Object {
+            "loader": "/node_modules/sass-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+            },
+          },
+        ],
+      },
+      Object {
+        "test": /\\\\\\.module\\\\\\.css\\$/,
+        "use": Array [
+          Object {
+            "loader": "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          },
+          Object {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": Object {
+              "import": false,
+              "modules": true,
+              "sourceMap": true,
+              "url": true,
+            },
+          },
           Object {
             "loader": "/node_modules/postcss-loader/dist/cjs.js",
             "options": Object {
@@ -565,7 +634,7 @@ Object {
         ],
       },
       Object {
-        "include": undefined,
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
         "test": /\\\\\\.css\\$/,
         "use": Array [
           Object {
@@ -589,6 +658,7 @@ Object {
         ],
       },
       Object {
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
         "test": /\\\\\\.\\(sc\\|sa\\)ss\\$/,
         "use": Array [
           Object {
@@ -601,6 +671,29 @@ Object {
               "url": true,
             },
           },
+          Object {
+            "loader": "/node_modules/sass-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+            },
+          },
+        ],
+      },
+      Object {
+        "test": /\\\\\\.module\\\\\\.css\\$/,
+        "use": Array [
+          Object {
+            "loader": "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          },
+          Object {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": Object {
+              "import": false,
+              "modules": true,
+              "sourceMap": true,
+              "url": true,
+            },
+          },
           Object {
             "loader": "/node_modules/postcss-loader/dist/cjs.js",
             "options": Object {
@@ -754,7 +847,7 @@ Object {
         ],
       },
       Object {
-        "include": undefined,
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
         "test": /\\\\\\.css\\$/,
         "use": Array [
           Object {
@@ -778,6 +871,7 @@ Object {
         ],
       },
       Object {
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
         "test": /\\\\\\.\\(sc\\|sa\\)ss\\$/,
         "use": Array [
           Object {
@@ -790,6 +884,29 @@ Object {
               "url": true,
             },
           },
+          Object {
+            "loader": "/node_modules/sass-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+            },
+          },
+        ],
+      },
+      Object {
+        "test": /\\\\\\.module\\\\\\.css\\$/,
+        "use": Array [
+          Object {
+            "loader": "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          },
+          Object {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": Object {
+              "import": false,
+              "modules": true,
+              "sourceMap": true,
+              "url": true,
+            },
+          },
           Object {
             "loader": "/node_modules/postcss-loader/dist/cjs.js",
             "options": Object {
@@ -913,10 +1030,7 @@ Object {
         ],
       },
       Object {
-        "include": Array [
-          "/assets2/css",
-          "/includes2/blocks",
-        ],
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
         "test": /\\\\\\.css\\$/,
         "use": Array [
           Object {
@@ -940,6 +1054,7 @@ Object {
         ],
       },
       Object {
+        "exclude": /\\\\\\.module\\\\\\.css\\$/,
         "test": /\\\\\\.\\(sc\\|sa\\)ss\\$/,
         "use": Array [
           Object {
@@ -952,6 +1067,29 @@ Object {
               "url": false,
             },
           },
+          Object {
+            "loader": "/node_modules/sass-loader/dist/cjs.js",
+            "options": Object {
+              "sourceMap": true,
+            },
+          },
+        ],
+      },
+      Object {
+        "test": /\\\\\\.module\\\\\\.css\\$/,
+        "use": Array [
+          Object {
+            "loader": "/node_modules/mini-css-extract-plugin/dist/loader.js",
+          },
+          Object {
+            "loader": "/node_modules/css-loader/dist/cjs.js",
+            "options": Object {
+              "import": false,
+              "modules": true,
+              "sourceMap": true,
+              "url": false,
+            },
+          },
           Object {
             "loader": "/node_modules/postcss-loader/dist/cjs.js",
             "options": Object {
diff --git a/packages/toolkit/config/webpack/modules.js b/packages/toolkit/config/webpack/modules.js
index ef035784..0370ed66 100644
--- a/packages/toolkit/config/webpack/modules.js
+++ b/packages/toolkit/config/webpack/modules.js
@@ -1,27 +1,17 @@
-const path = require('path');
 const MiniCSSExtractPlugin = require('mini-css-extract-plugin');
 
 const { hasBabelConfig, hasPostCSSConfig, fromConfigRoot } = require('../../utils');
 
-module.exports = ({
-	isProduction,
-	isPackage,
-	defaultTargets,
-	projectConfig: { wordpress, paths },
-}) => {
-	const cssLoaders = [
+const getCSSLoaders = ({ options, postcss, sass }) => {
+	return [
 		{
 			loader: MiniCSSExtractPlugin.loader,
 		},
 		{
 			loader: require.resolve('css-loader'),
-			options: {
-				sourceMap: !isProduction,
-				// Local files like fonts etc. are copied using CopyWebpackPlugin when in project mode.
-				url: isPackage,
-			},
+			options,
 		},
-		{
+		postcss && {
 			loader: require.resolve('postcss-loader'),
 			options: {
 				postcssOptions: {
@@ -33,8 +23,16 @@ module.exports = ({
 				},
 			},
 		},
-	];
+		sass && {
+			loader: require.resolve('sass-loader'),
+			options: {
+				sourceMap: options ? options.sourceMap : false,
+			},
+		},
+	].filter(Boolean);
+};
 
+module.exports = ({ isProduction, isPackage, defaultTargets, projectConfig: { wordpress } }) => {
 	return {
 		rules: [
 			{
@@ -78,21 +76,43 @@ module.exports = ({
 			},
 			{
 				test: /\.css$/,
-				include: isPackage
-					? undefined
-					: paths.cssLoaderPaths.map((cssPath) => path.resolve(process.cwd(), cssPath)),
-				use: cssLoaders,
+				use: getCSSLoaders({
+					options: {
+						sourceMap: !isProduction,
+						url: isPackage,
+					},
+					postcss: true,
+					sass: false,
+				}),
+				exclude: /\.module\.css$/,
 			},
 			{
 				test: /\.(sc|sa)ss$/,
 				use: [
-					...cssLoaders,
-					{
-						loader: require.resolve('sass-loader'),
+					...getCSSLoaders({
 						options: {
 							sourceMap: !isProduction,
+							url: isPackage,
 						},
-					},
+						postcss: false,
+						sass: true,
+					}),
+				],
+				exclude: /\.module\.css$/,
+			},
+			{
+				test: /\.module\.css$/,
+				use: [
+					...getCSSLoaders({
+						options: {
+							sourceMap: !isProduction,
+							url: isPackage,
+							import: false,
+							modules: true,
+						},
+						postcss: true,
+						sass: true,
+					}),
 				],
 			},
 			// when in package module only include referenced resources
diff --git a/projects/10up-theme/assets/js/shared/shared.js b/projects/10up-theme/assets/js/shared/shared.js
index 01336335..90ed7818 100755
--- a/projects/10up-theme/assets/js/shared/shared.js
+++ b/projects/10up-theme/assets/js/shared/shared.js
@@ -1,3 +1,7 @@
+// eslint-disable-next-line import/no-unresolved
 import Accordion from '@10up/component-accordion';
+import styles from './shared.module.css';
+
+console.log(styles);
 
 new Accordion('.test', {});
diff --git a/projects/10up-theme/assets/js/shared/shared.module.css b/projects/10up-theme/assets/js/shared/shared.module.css
new file mode 100644
index 00000000..3e96b275
--- /dev/null
+++ b/projects/10up-theme/assets/js/shared/shared.module.css
@@ -0,0 +1,4 @@
+.test {
+	font-weight: 700;
+	position: absolute;
+}