Question

尝试访问全局SCSS变量，就像我在其余应用程序中一样。到目前为止，我已经接受了它，但是目前<?php $nonce = 0; $customer = '1'; $api_key = 'mykey'; $api_secret = hex2bin('AABBCC'); $string = $nonce . $customer . $api_key; $signature = strtoupper(hash_hmac('sha256', $string, $api_secret)); // FFB95E1E991734F1C2AE0B7C7ACECFAA5D3BEE943189539C3439B344A9A82E39 echo $signature;测试文件中出现了此错误；

.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配置，并遵循了Storybook网站上的官方文档，但是没有运气。

config.ts

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; } }中的SCSS变量的支持/指南。

Answer 1

也许您还应该要求webpack编译.scss文件。?

尝试

test: /\.(s*)css$/

Answer 2

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

Answer 3

因此，Storybook或文档没有明确告诉您，拥有两个Webpack配置并不理想。如果要镜像组件，则基本上需要满足主要Webpack配置中所需的许多内容。

尽管有一种方法可以将所有选项分开进行一个webpack配置，以便您可以根据需要在整个站点上重复使用它多次。我什至写了一篇有关如何做的文章，并为您建立了样板模板（如果您想检出它的话）。

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

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

3 个答案: