0

因此，在我的 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";
  1. 如果，除此之外，如果我不能像这样导入：“来自'./Button.scss'的常量样式；有没有办法将它放入一个对象中，以便我可以迭代它并显示颜色样本？

按钮故事

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/ 文件夹中的 'main.js' 修改为以下内容，所以现在我使用“从 './Button.scss' 导入样式。我放弃了“导入 Button.scss”。

但是，我没有尝试通过样式来查看，但我想我现在可以……但我没有尝试过。现在这样做：

webpackFinal: async (config) => {
    config.module.rules.push({
      test: /\.scss$/,
      exclude: [/node_modules/, /styles\//, /styles\//],
      use: [
        { loader: "style-loader" },
        {
          loader: "css-loader",
          options: {
            modules: {
              localIdentName: "[name]__[local]--[hash:base64:5]",
            },
          },
        },
        { loader: "sass-loader" },
      ],
      include: path.resolve(__dirname, "../")
    },
      {
      test: /\.scss$/,
      include: [/styles\//],
      use: [
      'style-loader',
      {
        loader: 'css-loader',
        query: {
          modules: false,
          importLoaders: true,
          sourceMap: true,
        },
      },
        {
          loader: `postcss-loader`,
          options: {
            options: {},
          }
        },
        'sass-loader',
    ],
  });
4

1 回答 1

0

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

于 2020-06-14T18:05:26.277 回答