尝试访问全局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变量的支持/指南。
答案 0 :(得分：0)
也许您还应该要求webpack编译.scss文件。?
尝试
test: /\.(s*)css$/
答案 1 :(得分：0)
遇到同样的问题，然后发现Storybook开箱即用地支持scss配置，我从Storybook Webpack配置覆盖中删除了与sass / scss相关的所有规则，并且一切正常。但是需要npm i node-sass
答案 2 :(得分：0)
因此，Storybook或文档没有明确告诉您，拥有两个Webpack配置并不理想。如果要镜像组件，则基本上需要满足主要Webpack配置中所需的许多内容。
尽管有一种方法可以将所有选项分开进行一个webpack配置，以便您可以根据需要在整个站点上重复使用它多次。我什至写了一篇有关如何做的文章，并为您建立了样板模板（如果您想检出它的话）。
https://levelup.gitconnected.com/a-killer-storybook-webpack-config-a0fd05dc70a4