Question

[！]错误：“默认”不是由src / styles / variables.scss导出的，由src / components / Layout / Layout.themes.tsx导入https://rollupjs.org/guide/en/#error-name-is-not-exported-by-modulesrc / components / Layout / Layout.themes.tsx（1：7）1：从导入vbl'../../ 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';的导入，但也失败了：

[！]错误：src / styles / variables.scss未导出“变量”，由src / components / Layout / Layout.themes.tsx导入https://rollupjs.org/guide/en/#error-name-is-not-exported-by-modulesrc / components / Layout / Layout.themes.tsx（1：9）1：导入{变量}，来自'../../ styles / variables.scss';
我能够通过Storybook服务该项目，但是当我通过汇总构建时，遇到上面列出的错误。请协助我解决此构建失败吗？

我遇到以下汇总构建故障，我希望能够在我的打字稿文件中使用来自scss文件的导出。生成失败的内容如下：[！]错误：'默认'...

Answer 1

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

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

并且这发生在transform hook中，在解析发生之前会调用它。这很重要，因为transform hook被视为模块，这意味着您可以将其导入到js文件中。所以我认为您必须手动将export default ...文件与以下文件捆绑在一起：

variables

现在，出现另一个问题：当从scss({ output: false }).
文件导入时，您将得到.scss对象字符串化。

例如：

:export

该插件在使用"export default ":export {\n  colorBlue: #1c4077;\n  colorOrange: #e87d1e; }\n""
的情况下。 

因此，我认为解决方案包括处理该字符串，以便最终得到这样的结果：

does not seem to handle this