Rollup Build failure for SCSS exports to be used in TS ( [!] Error: 'default' is not exported by src/styles/variables.scss )

Question

我运行遇到以下汇总构建失败，我希望能够在我的打字稿文件中使用来自 scss 文件的导出。

构建失败如下：

[!] Error: 'default' is not exported by src/styles/variables.scss, imported by src/components/Layout/Layout.themes.tsx https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module src/components/Layout/Layout.themes.tsx (1:7) 1: import vbl from '../../styles/variables.scss';

我的汇总配置如下所示：

import scss from 'rollup-plugin-scss';
import typescript from 'rollup-plugin-typescript2';
import image from '@rollup/plugin-image';
import { terser } from 'rollup-plugin-terser';
import pkg from './package.json';

export default {
  input: ['src/index.tsx'],
  output: [
    {
      file: pkg.main,
      format: 'cjs',
      sourcemap: true,
      name: 'Main'
    },
    {
      file: pkg.module,
      format: 'esm',
      sourcemap: true,
      name: 'tree-shaking'
    }
  ],
  external: [...Object.keys(pkg.dependencies || {}), ...Object.keys(pkg.devDependencies || {}), ...Object.keys(pkg.peerDependencies || {})],
  plugins: [image(), scss({ output: 'dist/styles.css' }), typescript({ useTsconfigDeclarationDir: true }), terser()]
};

variables.scss 包含：

// colors
$color-blue: #1c4077;
$color-orange: #e87d1e;

:export {
  colorBlue: $color-blue;
  colorOrange: $color-orange;
}

variables.scss.d.ts 类型文件包含：

export interface IGlobalScss {
  colorBlue: string;
  colorOrange: string;
}

export const variables: IGlobalScss;

export default variables;

Layout.themes.tsx 文件内容如下：

import vbl from '../../styles/variables.scss';

export const myTheme = {
  headerColor: vbl.colorBlue,
  footerColor: vbl.colorOrange
}

我已经尝试导入非默认导出 import { variables } from '../../styles/variables.scss'; 但它也失败了：

[!] Error: 'variables' is not exported by src/styles/variables.scss, imported by src/components/Layout/Layout.themes.tsx https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module src/components/Layout/Layout.themes.tsx (1:9) 1: import { variables } from '../../styles/variables.scss';

我可以通过 Storybook 为项目提供服务，但是当我通过 Rollup 构建时，我遇到了上面列出的错误。请协助我解决此构建失败问题？

这里是这个例子的CodeSandbox。提取 zip，yarn 和运行 yarn start 或 yarn build 进行测试VSCode。您会注意到 yarn start 成功，而 yarn build 将失败，如上所述。

Answer 1

我认为问题是 output 属性是 不是 false.

以下是当属性设置为 false 时插件的作用：

if (options.output === false) {
  const css = compileToCSS(code)
  return {
    code: 'export default ' + JSON.stringify(css),
    map: { mappings: '' }
  }
}

这发生在 transform hook 中，它在解析发生之前被调用。这很重要，因为 export default ... 被视为一个模块，这意味着您可以将其导入到您的 js 文件中。

所以我认为您必须手动捆绑 variables 文件：

scss({ output: false }).

现在，另一个问题出现了：当您从 .scss 文件导入时，您将得到 :export 对象字符串化。

例如：

"export default ":export {\n  colorBlue: #1c4077;\n  colorOrange: #e87d1e; }\n""

插件使用does not seem to handle this案例。

所以我认为解决方案涉及操纵该字符串，以便您最终得到如下内容：

`{ colorX: 'value', colorY: 'value' }`

Rollup Build failure for SCSS exports to be used in TS ( [!] Error: 'default' is not exported by src/styles/variables.scss )

Rollup Build failure for SCSS exports to be used in TS ( [!] Error: 'default' is not exported by src/styles/variables.scss )

reactjs

typescript

sass

rollup

rollupjs