[英]Can't access global SCSS variables in Storybook with Webpack + React
试图访问全局 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;
}
}
我正在寻找有关如何让故事书能够加载位于../src/scss/global.scss
SCSS 变量的任何支持/指导。
所以 Storybook 或文档没有明确告诉你的是,拥有两个 webpack 配置并不理想。 如果您尝试镜像组件,则基本上需要满足主 webpack 配置中所需的许多内容。
尽管有一种方法可以将所有选项分开的一个 webpack 配置,以便您可以根据需要在整个站点中多次重复使用它。 我什至写了一篇关于如何做的文章,并为您构建了一个样板模板,如果您想查看它,它已经设置好了。
https://levelup.gitconnected.com/a-killer-storybook-webpack-config-a0fd05dc70a4
也许您也应该要求webpack编译.scss文件。
尝试
test: /\.(s*)css$/
遇到了同样的问题,然后发现 Storybook 支持开箱即用的 scss 配置,我从 storybook webpack 配置覆盖中删除了与 sass/scss 相关的所有规则,一切正常。 但是需要npm i node-sass
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.