将scss文件读入变量，以便我可以遍历它

Question

因此，在我的Storybook项目中，我引入了一个bitstrc样式表，它是一个“ .scss”文件。工作正常。这个问题起了作用，因为我想对其进行迭代并显示色样。有谁知道这是怎么做的？

目前，按当前版本，需要：卷起这是我的配置：

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

所以，我可以在我的scss文件中导入“ @bit ...”。但是我有两个问题。

1. 如何允许我的样式包含在我的.stories文件中？

在我的BUTTON.STORIES文件中]我在做：工作正常，可以使用样式。

  import "./Button.scss".
我想做：

  const styles from import "./Button.scss";
IF，此外，如果我不能这样导入：“'./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__()
    

因此，在我的Storybook项目中，我引入了一个bitstrc样式表，它是一个“ .scss”文件。工作正常。这个问题起了作用，因为我想对其进行迭代并显示色样。任何人...

Answer 1

您正在使用的sass插件不支持CSS模块，请使用支持它们的模块，例如rollup-plugin-postcss（它也支持sass）。