I've encountered an issue with my typescript SharePoint spfx solution. After compiling using webpack, my $styles variable becomes undefined even though I am able to use the class names directly.
It seems like there might be a configuration problem at play here. Can anyone offer some assistance?
This is the SCSS code I'm working with:
@import "~bootstrap/scss/bootstrap";
.app {
.top {
text-align:center;
justify-content: center;
.customalert {
margin-bottom: 0px !important;
font-size: 14px;
}
}
}
And here's the HTML output I'm trying to achieve:
import styles from './AppCustomizer.module.scss';
return `<div class="${styles.app}">
<div class="${styles.top}">
<div class="alert alert-${alertStatus} ${styles.customalert}">
<strong>${alertTitle}</strong> ${alertDescription}
</div>
</div>
</div>
and here is my webpack.config.js:
const path = require("path");
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
mode: "development",
entry: ['@babel/polyfill',
path.resolve(__dirname, './Classic/client/bootHeader.ts')],
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/
},
{
test: /\.(s*)css$/,
use: [
// fallback to style-loader in development
process.env.NODE_ENV !== "production"
? "style-loader"
: MiniCssExtractPlugin.loader,
"css-loader",
"sass-loader"
]
},
{
test: /\.(png|jp(e*)g|svg)$/,
use: [
{
loader: "url-loader",
options: {
limit: 15000, // Convert images < 8kb to base64 strings
name: "images/[hash]-[name].[ext]"
}
}
]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "[name].css",
chunkFilename: "[id].css"
})
],
resolve: {
extensions: [".tsx", ".ts", ".js"]
},
output: {
filename: "classicBundleAG.js",
path: path.resolve(__dirname, "Classic"),
libraryTarget: "umd"
},
//externals: [
// "@microsoft/sp-loader",
//]
};
One thing worth noting is that when I access the styles directly as "customalert", the style is recognized. However, $styles remains undefined if used in the code.