Прочтите файл scss в переменную, чтобы я мог пройти через него

Question

Итак, в моем проекте Storybook я использую таблицу стилей bitstrc, которая представляет собой файл ".scss". Работает нормально. Проблема возникает, потому что я хочу перебрать ее и отобразить образцы цвета. Кто-нибудь знает, как это делается?

Прямо сейчас текущая сборка взяла: Rollup Вот моя конфигурация:

import peerDepsExternal from "rollup-plugin-peer-deps-external";
import resolve from "rollup-plugin-node-resolve";
import typescript from "rollup-plugin-typescript2";
import sass from "rollup-plugin-sass";
import commonjs from "rollup-plugin-commonjs";
import copy from "rollup-plugin-copy";

import packageJson from "./package.json";

export default {
  input: "src/index.ts",
  output: [
   {
     file: packageJson.main,
     format: "cjs",
     sourcemap: true
   },
  {
    file: packageJson.module,
    format: "esm",
    sourcemap: true
  }
],
plugins: [
  peerDepsExternal(),
  resolve(),
  commonjs(),
  typescript({ useTsconfigDeclarationDir: true }),
  sass({
    insert: true
  })
]

};

Для контекста вот моя структура папок:

 Button/
    Button.tsx
    Button.scss // <- HERE I include my '@bit/someproject/colors.scss' file
    Button.stories.tsx

Итак, я могу импортировать "@bit..." в свои файлы scss. НО у меня две проблемы.

1. Как разрешить включение моего стиля в мой файл.stories?

В МОЕМ файле BUTTON.STORIES я делаю: Работает нормально, у меня есть доступ к стилям.

  import "./Button.scss".

Я хочу сделать:

  const styles from import "./Button.scss";

1. ЕСЛИ и в дополнение к, если я не могу импортировать вот так: "стили const из './Button.scss'; Есть ли способ поместить это в объект, чтобы я мог перебирать его и отображать образцы цвета?

Button.stories

import '@bit/myfolder/colors.scss';

затем... получить эти цветовые переменные и создать образцы.

Конечно, когда я это сделаю, сейчас:

const colors from '@bit/someproject/colors.scss'

цвета - это объект, который выглядит так:

Object
__proto__:
constructor: ƒ Object()
hasOwnProperty: ƒ hasOwnProperty()
isPrototypeOf: ƒ isPrototypeOf()
propertyIsEnumerable: ƒ propertyIsEnumerable()
toLocaleString: ƒ toLocaleString()
toString: ƒ toString()
valueOf: ƒ valueOf()
__defineGetter__: ƒ __defineGetter__()
__defineSetter__: ƒ __defineSetter__()
__lookupGetter__: ƒ __lookupGetter__()
__lookupSetter__: ƒ __lookupSetter__()
get __proto__: ƒ __proto__()
set __proto__: ƒ __proto__()

Answer 1

Плагин sass, который вы используете, не поддерживает модули CSS, используйте тот, который поддерживает их, например rollup-plugin-postcss (он также поддерживает sass).