fix: Sass modules bug (#2555)

trussworks · Sep 29, 2023 · a1ed9f7 · a1ed9f7
1 parent c489814
commit a1ed9f7
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 27 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -1,26 +1,35 @@
 const path = require('path')
 
+const uswdsIncludePaths = [
+  './node_modules/@uswds',
+  './node_modules/@uswds/uswds/packages',
+]
+
 const webpackConfig = (config) => {
-  config.resolve.alias.uswds = path.resolve(__dirname, '../node_modules/@uswds/uswds')
+  config.resolve.alias.uswds = path.resolve(
+    __dirname,
+    '../node_modules/@uswds/uswds'
+  )
 
   config.module.rules = config.module.rules.filter(
     (rule) => rule.test.toString() !== '/\\.css$/'
   )
   config.module.rules.push({
     test: /\.(sa|sc|c)ss$/,
     exclude: /\.module\.(sa|sc|c)ss$/i,
-    use: ['style-loader', 'css-loader', {
-      loader: "sass-loader",
-      options: {
-        sourceMap: true,
-        sassOptions: {
-          includePaths: [
-            "./node_modules/@uswds",
-            "./node_modules/@uswds/uswds/packages",
-          ],
+    use: [
+      'style-loader',
+      'css-loader',
+      {
+        loader: 'sass-loader',
+        options: {
+          sourceMap: true,
+          sassOptions: {
+            includePaths: uswdsIncludePaths,
+          },
         },
       },
-    },],
+    ],
     include: path.resolve(__dirname, '../'),
   })
 
@@ -37,7 +46,15 @@ const webpackConfig = (config) => {
           },
         },
       },
-      "sass-loader",
+      {
+        loader: 'sass-loader',
+        options: {
+          sourceMap: true,
+          sassOptions: {
+            includePaths: uswdsIncludePaths,
+          },
+        },
+      },
     ],
   })
 

diff --git a/src/components/Alert/Alert.module.css → src/components/Alert/Alert.module.scss b/src/components/Alert/Alert.module.css → src/components/Alert/Alert.module.scss
diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames'
 
 import { HeadingLevel } from '../../types/headingLevel'
 
-import styles from './Alert.module.css'
+import styles from './Alert.module.scss'
 
 type AlertProps = {
   type: 'success' | 'warning' | 'error' | 'info'

diff --git a/src/components/Table/Table.module.css → src/components/Table/Table.module.scss b/src/components/Table/Table.module.css → src/components/Table/Table.module.scss
diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import styles from './Table.module.css'
+import styles from './Table.module.scss'
 
 type TableProps = {
   bordered?: boolean

diff --git a/webpack.config.js b/webpack.config.js
@@ -2,6 +2,11 @@ const path = require('path')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin')
 
+const uswdsIncludePaths = [
+  './node_modules/@uswds',
+  './node_modules/@uswds/uswds/packages',
+]
+
 module.exports = {
   mode: 'production',
   entry: {
@@ -62,26 +67,33 @@ module.exports = {
               },
             },
           },
-          'sass-loader'
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+              sassOptions: {
+                includePaths: uswdsIncludePaths,
+              },
+            },
+          },
         ],
       },
       {
         test: /\.(sa|sc|c)ss$/i,
         exclude: /\.module\.(sa|sc|c)ss$/i,
-        use: [MiniCssExtractPlugin.loader, 'css-loader', 
-        {
-          loader: "sass-loader",
-          options: {
-            sourceMap: true,
-            sassOptions: {
-              includePaths: [
-                "./node_modules/@uswds",
-                "./node_modules/@uswds/uswds/packages",
-              ],
+        use: [
+          MiniCssExtractPlugin.loader,
+          'css-loader',
+          {
+            loader: 'sass-loader',
+            options: {
+              sourceMap: true,
+              sassOptions: {
+                includePaths: uswdsIncludePaths,
+              },
             },
           },
-        },
-      ],
+        ],
       },
       {
         test: /\.svg$/,