reactjs - Falla de compilación de Rollup para exportaciones SCSS que se usarán en TS ( [!] Error: 'default' no es exportado por src/styles/variables.scss )

Me estoy encontrando con el siguiente fallo en la compilación con rollup, donde me gustaría poder usar exportaciones de un archivo scss en mis archivos typescript.

El fallo de compilación se lee de la siguiente manera:

[!] Error: 'default' no está exportado por src/styles/variables.scss, importado por 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 desde '../../styles/variables.scss';

Mi configuración de rollup se ve de la siguiente manera:

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()]
};

El archivo variables.scss contiene:

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

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

El archivo de tipificaciones variables.scss.d.ts contiene:

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

export const variables: IGlobalScss;

export default variables;

Y el archivo Layout.themes.tsx se lee de la siguiente manera:

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

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

He intentado una importación de la exportación no predeterminada import { variables } from '../../styles/variables.scss'; pero también falla con:

[!] Error: 'variables' no está exportado por src/styles/variables.scss, importado por 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';

Puedo servir el proyecto a través de Storybook, sin embargo, cuando construyo mediante Rollup encuentro el error mencionado arriba. ¿Podría ayudarme a resolver este fallo de construcción?

Aquí hay un CodeSandbox para este ejemplo. Extrae el zip, yarn y ejecuta ya sea yarn start o yarn build para probar en VSCode. Notarás que yarn start tiene éxito mientras que yarn build fallará como se mencionó arriba.

Respuesta #1

Creo que el problema es que la propiedad output no es falsa.

Esto es lo que hace el complemento cuando esa propiedad está configurada en falso:

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

y esto ocurre en el hook de transformación, que se invoca antes de que tenga lugar el análisis. Esto es importante porque export default ... se trata como un módulo, lo que significa que puedes importarlo en tus archivos js.

Así que creo que tendrás que empaquetar manualmente ese archivo variables con:

scss({ output: false }).

Ahora, surge otro problema: cuando importas desde el archivo .scss, obtendrás el objeto :export convertido en cadena.

Por ejemplo:

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

El complemento en uso no parece manejar este caso.

Así que creo que la solución implica manipular esa cadena para que termines con algo como esto:

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