Javascript 无法使用Webpack+React访问故事书中的全局SCSS变量
尝试访问全局SCSS变量,就像我在应用程序的其余部分中一样。到目前为止,我已经解决了这个问题,但我目前在.storybook.scss测试文件中遇到了这个错误 .storybook目录和src目录是同级目录Javascript 无法使用Webpack+React访问故事书中的全局SCSS变量,javascript,reactjs,webpack,sass,storybook,Javascript,Reactjs,Webpack,Sass,Storybook,尝试访问全局SCSS变量,就像我在应用程序的其余部分中一样。到目前为止,我已经解决了这个问题,但我目前在.storybook.scss测试文件中遇到了这个错误 .storybook目录和src目录是同级目录 -/.storybook |-config.ts |-storybook.scss |-webpack.config.js -/src |-/components/ |-/scss/ |-global.scss 我曾尝试使用许多不同的webpack.config
-/.storybook
|-config.ts
|-storybook.scss
|-webpack.config.js
-/src
|-/components/
|-/scss/
|-global.scss
我曾尝试使用许多不同的webpack.config.js和config.ts配置,并遵循故事书网站上的官方文档,但没有成功
webpack.config.js
config.ts
.storybook.scss
Dialog.tsx
我正在寻找关于如何让storybook能够加载位于../src/SCSS/global.SCSS中的SCSS变量的任何支持/指导。也有类似的问题,然后发现storybook支持SCSS配置,我从storybook网页包配置覆盖中删除了所有与sass/SCSS相关的规则,一切都正常。然而,npm i节点sass是需要的所以故事书或文档没有明确告诉您的是,配置两个Web包并不理想。若你们想镜像你们的组件,你们需要基本上满足你们的主网页配置中的很多需要 虽然有一种方法可以将所有选项分开,只配置一个网页包,这样你就可以在整个网站上重复使用它,只要你需要。我甚至写了一篇关于如何做到这一点的文章,并为您构建了一个锅炉板模板,如果您想查看它,它已经设置好了
你解决过这个问题吗?如果是,解决办法是什么?我也有同样的问题。似乎Storybook应该在他们的网站上记录这一点,但事实并非如此。我会在@keyboard warrior中将其添加为答案,但是的,我确实找到了答案:
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)
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
}
]
}
}
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);
body {
background: $color-primary;
}
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;
.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;
}
}