Question

我正在处理的一个项目需要为生成的 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;
      `
  }

Answer 1

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

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

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

1 个答案: