[英]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.