无法使用 Webpack + React 访问 Storybook 中的全局 SCSS 变量

Question

尝试访问全局 SCSS 变量，就像我在我的应用程序的其余部分中所做的那样。到目前为止，我已经采取了它，但我目前在 .storybook.scss 测试文件中遇到此错误；

.storybook目录和src目录是兄弟。

-/.storybook
  |-config.ts
  |-storybook.scss
  |-webpack.config.js
-/src
  |-/components/
  |-/scss/
    |-global.scss

ERROR in ./src/components/Global/Dialog/dialog.scss (./node_modules/react-scripts/node_modules/css-loader??ref--8-1!./node_modules/postcss-loader/src??postcss!./node_modules/sass-loader/lib/loader.js??ref--8-3!./node_modules/style-loader!./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/lib/loader.js!./src/components/Global/Dialog/dialog.scss)
Module build failed (from ./node_modules/sass-loader/lib/loader.js):

.modal {
^
Invalid CSS after "": expected 1 selector or at-rule, was "var content = requi"

in /Users/hghazni/Sites/eat/src/components/Global/Dialog/dialog.scss (line 1, column 1)

我曾尝试使用许多不同的 webpack.config.js 和 config.ts 配置并遵循 Storybook 网站上的官方文档，但没有成功。

webpack.config.js

const { resolve } = require('path');

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                loaders: ['style-loader', 'css-loader', 'sass-loader'],
                include: path.resolve(__dirname, '../src/scss')
            },
            {
                test: /\.css$/,
                loader: 'style-loader!css-loader',
                include: __dirname
            }
        ]
    }
}

config.ts

import { configure } from "@storybook/react";
require('./storybook.scss');

const req = require.context('../src/', true, /.stories.tsx$/);

function loadStories() {
    req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);

.storybook.scss

body {
    background: $color-primary;
}

Dialog.tsx

import React from 'react'
import './dialog.scss';

type DialogType = {
  onClose: any;
  isOpen: any;
}

const Dialog: React.SFC<any> = props => {
  let dialog: any = (
    <div className={"dialog " + props.dialogClass}>
      <button className={"dialogClose"} onClick={props.onClose}>X</button>
      <div>{props.children}</div>
    </div>
  );

  if (!props.isOpen) {
    dialog = null;
  }

  return (
    <div className="modal">
      {dialog}
    </div>
  )
}

export default Dialog;

dialog.scss

.modal {
  position: absolute;
  top: 20%;
  left: 50%;
  -webkit-transform: translate(-50%);
  transform: translate(-50%);
  width: 95%;

  @include media-query(min, $desk-start) {
    width: 70%;
    max-width: $desk-start;
  }
}

.dialog {
  border: 4px dashed rgba(47, 144, 189, 0.411);
  border-radius: $half-spacing;
  padding: $base-spacing;
  background: $color-base;
}

.dialogClose {
  position: absolute;
  top: 0;
  right: 0;
  padding: $half-spacing;
  background: $color-base;
  border: 1px solid rgba(47, 144, 189, 0.411);
  color: rgba(47, 144, 189, 1);
  border-radius: 50px;
  padding: $half-spacing 12.5px;

  &:hover {
    cursor: pointer;
  }
}

我正在寻找任何 support/guidance 关于如何让故事书能够加载位于 ../src/scss/global.scss.

中的 SCSS 变量的任何信息

Answer 1

遇到了同样的问题，然后发现 Storybook 支持开箱即用的 scss 配置，我从 storybook webpack config override 中删除了所有与 sass/scss 相关的规则，一切正常。但是需要 npm i node-sass

Answer 2

所以 Storybook 或文档没有明确告诉您的是，拥有两个 webpack 配置并不理想。如果你想镜像你的组件，你基本上需要满足你的主要 webpack 配置中需要的很多东西。

虽然有一种方法必须将所有选项分开的一个 webpack 配置，这样您就可以根据需要在站点中多次重复使用它。我什至写了一篇关于如何做的文章，并为你构建了一个样板模板，如果你想查看的话，它已经设置好。

https://levelup.gitconnected.com/a-killer-storybook-webpack-config-a0fd05dc70a4

无法使用 Webpack + React 访问 Storybook 中的全局 SCSS 变量

Can't access global SCSS variables in Storybook with Webpack + React

javascript

sass

reactjs

webpack

storybook