将 scss 文件读入一个变量，以便我可以循环遍历它 [英] Read a scss file into a variable so I can loop thru it

问题描述

因此，在我的 Storybook 项目中，我引入了一个名为.scss"的 bitstrc 样式表.文件.它工作正常.这个问题开始发挥作用，因为我想迭代它并显示色板.有人知道这是怎么做到的吗?

So, in my Storybook project, I am bringing in a bitstrc style sheet that is a ".scss" file. It works fine. The issue comes into play cause I want to iterate over it and display color swatches. Anyone know how this is done?

现在，按当前构建采用的是:卷起这是我的配置:

Right now, by current build took is: Rollup Here is my config:

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

};

对于上下文，这是我的文件夹结构:

For context, here is my folder structure:

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

所以，我可以导入@bit..."；在我的 scss 文件中就好了.但我有两个问题.

So, I can import "@bit..." just fine in my scss files. BUT I am having two issues.

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

在我的 BUTTON.STORIES 文件中我正在做:工作正常，我可以访问样式.

IN MY BUTTON.STORIES file I am doing: Works fine, I have access to the styles.

  import "./Button.scss".

我想做:

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

1. 如果并且此外，如果我不能像这样导入:"const styles from './Button.scss';有没有办法将它放入一个对象中，以便我可以对其进行迭代并显示色板?

按钮故事

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

然后...获取这些颜色变量并创建色板.

then... get those color variables and create the swatches.

当然，当我这样做时，现在:

Of course when I do, now:

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

colors 是一个看起来像这样的对象:

colors is an object that looks like:

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

NOTE: I ended up modifying the 'main.js' in .storybook/ folder to the follow so now I use "import styles from './Button.scss'. I ditched the "import Button.scss".

但是，我还没有尝试通过风格来寻找，但我想我现在可以......但我还没有尝试过.现在这样做:

BUT, I have NOT tried to look thru styles, but i imagine I could now...but I haven't tried. Doing this now:

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

推荐答案

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

The sass plugin you are using does not support CSS modules, use one that does support them such as rollup-plugin-postcss (it also supports sass).

这篇关于将 scss 文件读入一个变量，以便我可以循环遍历它的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！