用于TS的SCSS导出的汇总构建失败( [!] )错误: src/styles/variables.scss未导出“default”)

Question

在下面的汇总构建失败中，我希望能够在我的类型记录文件中使用来自scss文件的导出。

生成失败如下：

好了！错误:src/ https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module /variables.scss未导出“default”，由src/components/Layout.themes.tsx//Layout.temes.tsx ( 1: 7) 1:导入vbl从‘././样式/variables.scss’导入vbl；

我的rollup配置如下所示：

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/ https://rollupjs.org/guide/en/#error-name-is-not-exported-by-module /variables.scss导出的，而是由src/components/Layout.themes.tsx src/components/Layout.temes.tsx ( 1: 9) 1:导入{变量}从‘.././样式/变量.src’导入的；

我可以通过故事簿为项目服务，但是当我通过汇总构建时，我会遇到上面列出的错误。请帮助我解决这个构建失败？

下面是这个例子的CodeSandbox。提取拉链，纱，并运行纱线启动或成纱在VSCode中测试。您会注意到，纱线的开始成功，而纱线的建设将失败，如上文所述。

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""

用似乎处理不了这个用例中的插件。

因此，我认为解决方案涉及操作该字符串，以便您最终得到这样的结果：

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