I'm currently working on a project that requires the generation of .d.ts files for the scss it produces. Instead of manually creating these files, I have integrated css-modules-typescript-loader with Storybook to automate this process.
However, I am facing difficulties in getting the same setup to work in nextjs. Despite modifying next.config.js as shown below:
webpack: function (config, options) {
const { dir, defaultLoaders } = options
config.module.rules.push({
test: /\.md$/,
use: 'markdown-loader'
})
config.module.rules.push({
test: /\.module.scss$/,
include: [dir],
exclude: /node_modules/,
use: [
defaultLoaders.babel,
{
loader: 'css-modules-typescript-loader',
options: { mode: process.env.CI ? 'verify' : 'emit' }
}
]
})
return config
},
When implementing this, it interferes with the existing processing done by next which causes issues. My main goal is only to generate the d.ts files without affecting any other functionalities provided by nextjs. Is there a way to achieve this?
Additional attempts using external packages like typed-scss-modules were made, but they do not seem to support specifying namespaces used in our sass files defined in next.config.js (referenced below):
sassOptions: {
outputStyle: 'expanded',
indentWidth: 4,
prependData: `
@use '@themes/vars' as vars;
@use '@themes/breakpoints' as bp;
`
}