获取 nextjs 生成 scss.d.ts 文件答案

【问题标题】：Get nextjs to produce scss.d.ts files获取 nextjs 生成 scss.d.ts 文件
【发布时间】：2021-06-21 06:24:53
【问题描述】：

我正在处理的项目需要为生成的 scss 输出 .d.ts 文件。我没有手动设置，而是在 Storybook 中进行了设置，以便 css-modules-typescript-loader 自动生成这些文件。

我正在尝试在 nextjs 中实现相同的功能，但它似乎不愿意让我这样做。我已修改 next.config.js 以包含以下内容：

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
  },

但是，如果我这样做，它可以理解地取代下一个已经在做的处理（这会导致问题），我不需要它来做任何事情，我想要的只是 d.ts 文件。这在 nextjs 中可以实现吗？

编辑：我尝试使用外部包，例如 typed-scss-modules，但不幸的是，我们在 next.config.js 中配置的 sass 文件中使用命名空间（例如，请参见下文），并且该包似乎没有请允许我指定这些：

sassOptions: {
    outputStyle: 'expanded',
    indentWidth: 4,
    prependData: `
        @use '@themes/vars' as vars;
        @use '@themes/breakpoints' as bp;
      `
  }

【问题讨论】：

标签： typescript sass next.js

【解决方案1】：

我之前没有使用过css-modules-typescript-loader，但我在我的项目中使用了typed-less-module 来生成打字文件。 Typed SCSS Module 应该以类似的方式工作。

// something like this in package.json
"typegen:scss": "tsm ./src --exportType default",

【讨论】：

我已经尝试过了，虽然这是一个很好的解决方案，但不幸的是，它忽略了 sassOptions 这意味着我无法让它识别我在项目中使用的命名空间。