在 TS 中使用 SCSS 导出时汇总构建失败（[!] 错误：'default' 未由 src/styles/variables.scss 导出）

Question

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

构建失败的内容如下：

[！] 错误：“默认”不是由 src/styles/variables.scss 导出，而是由 src/components/Layout/Layout.themes.tsx https://rollupjs.org/guide/en/#error-name-导入不是由模块导出的 src/components/Layout/Layout.themes.tsx (1:7) 1: 从 '../../styles/variables.scss' 导入 vbl；

我的汇总配置如下所示：

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';，但它也失败了：

[！] 错误：“变量”不是由 src/styles/variables.scss 导出，而是由 src/components/Layout/Layout.themes.tsx https://rollupjs.org/guide/en/#error-name-导入不是由模块导出的 src/components/Layout/Layout.themes.tsx (1:9) 1: 从 '../../styles/variables.scss' 导入 { 变量 };

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

这是此示例的CodeSandbox 。提取 zip、yarn并运行yarn start或yarn build以在 VSCode 中进行测试。您会注意到，如上所述，纱线启动成功，而纱线构建将会失败。

Answer 1

我认为问题在于output属性不 假。

当该属性设置为 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""

正在使用的插件似乎无法处理这种情况。

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

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