diff --git a/.storybook/main.ts b/.storybook/main.ts index e94b61ef1a..9a08dc34bd 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -1,7 +1,15 @@ 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$/' @@ -9,18 +17,19 @@ const webpackConfig = (config) => { 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 b/src/components/Alert/Alert.module.scss similarity index 100% rename from src/components/Alert/Alert.module.css rename to src/components/Alert/Alert.module.scss diff --git a/src/components/Alert/Alert.tsx b/src/components/Alert/Alert.tsx index 6a8abdcc69..bacbedb9b3 100644 --- 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 b/src/components/Table/Table.module.scss similarity index 100% rename from src/components/Table/Table.module.css rename to src/components/Table/Table.module.scss diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx index 75df08c48d..bc1d8a1e71 100644 --- 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 index 42862039bc..403fbeb9c7 100644 --- 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$/,