[英]Storybook Viewport Addon: Custom Viewports Do Not Build (react)
I built an app using create-react-app.我使用 create-react-app 构建了一个应用程序。 I create custom viewport types to add to my storybook.
我创建了自定义视口类型以添加到我的故事书中。 When I use yarn start everything builds fine and works.
当我使用 yarn start 时,一切都很好并且工作正常。 But when I build the app the viewports that I globally defined my preview.js file are not loading on the build.
但是当我构建应用程序时,我全局定义的 preview.js 文件的视口没有加载到构建中。 It is still the defaults.
它仍然是默认值。 And for the life of me I can't figure out why.
对于我的生活,我不知道为什么。 As far as I can tell I set it up the way the documentation explains.
据我所知,我按照文档解释的方式设置了它。
This is my preview.js file这是我的 preview.js 文件
import { configure, addDecorator, addParameters } from '@storybook/react';
import { DocsPage, DocsContainer } from '@storybook/addon-docs/blocks';
import { withA11y } from '@storybook/addon-a11y';
import { GlobalStyle } from '../src/styles/global-styles';
const loaderFn = () => {
const allExports = [];
const styles = require.context('../src/styles', true, /\.stories\.(js|mdx)$/);
const req = require.context('../src/components', true, /\.stories\.(js|mdx)$/);
addDecorator(withA11y, GlobalStyle);
styles.keys().forEach(fname => allExports.push(styles(fname)));
req.keys().forEach(fname => allExports.push(req(fname)));
return allExports;
};
const customViewports = {
phoneSmall: {
name: 'Phone (320px min width)',
styles: {
width: '320px',
height: '667px',
},
},
tabletSmall: {
name: 'Tablet Small & Portrait (600px min width)',
styles: {
width: '600px',
height: '801px',
},
},
tabletLarge: {
name: 'Tablet Large & Landscape (960px min width)',
styles: {
width: '960px',
height: '768px',
},
},
desktop: {
name: 'Desktop (1200px min width)',
styles: {
width: '1200px',
height: '1024px',
},
},
};
configure(loaderFn, module);
addParameters({
docs: {
container: DocsContainer,
page: DocsPage,
},
viewport: { viewports: customViewports },
});
My main.js file我的 main.js 文件
module.exports = {
stories: ['../src/**/*.stories.(js|mdx)'],
addons: [
'@storybook/preset-create-react-app',
'@storybook/addon-knobs/',
'@storybook/addon-actions',
'@storybook/addon-links',
'@storybook/addon-notes',
'@storybook/addon-storysource',
'@storybook/addon-a11y',
'@storybook/addon-docs',
'@storybook/addon-viewport',
]
}
Package.json包.json
{
"name": "tamman-ui",
"version": "0.1.0",
"private": true,
"dependencies": {
"@storybook/addon-a11y": "^5.3.17",
"@storybook/addon-actions": "^5.3.17",
"@storybook/addon-docs": "^5.3.17",
"@storybook/addon-knobs": "^5.3.17",
"@storybook/addon-links": "^5.3.17",
"@storybook/addon-notes": "^5.3.17",
"@storybook/addon-storyshots-puppeteer": "^5.3.17",
"@storybook/addon-storysource": "^5.3.17",
"@storybook/addon-viewport": "^5.3.17",
"@storybook/addons": "^5.3.17",
"@storybook/preset-create-react-app": "^2.1.0",
"@storybook/react": "^5.3.17",
"@testing-library/jest-dom": "^4.2.4",
"@testing-library/react": "^9.3.2",
"@testing-library/user-event": "^7.1.2",
"autoprefixer": "^9.7.5",
"camel-case": "^4.1.1",
"core-js": "^3.6.4",
"del": "^5.1.0",
"fs": "^0.0.1-security",
"node-sass": "^4.13.1",
"pascal-case": "^3.1.1",
"path": "^0.12.7",
"prop-types": "^15.7.2",
"puppeteer": "^2.1.1",
"react": "^16.12.0",
"react-dom": "^16.13.1",
"react-scripts": "^3.4.1",
"styled-components": "^5.0.1",
"xml2js": "^0.4.23"
},
"scripts": {
"start": "node ./src/components/atoms/Icon/utils/generate-icons.js && react-scripts start",
"build-page": "node ./src/components/atoms/Icon/utils/generate-icons.js && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"storybook": "start-storybook -p 9009 -s public",
"build": "yarn build-page && build-storybook -o build/storybook"
},
"eslintConfig": {
"extends": "react-app"
},
"homepage": ".",
"browserslist": [
"since 2010"
],
"devDependencies": {
"babel-loader": "^8.1.0",
"react-is": "^16.12.0"
}
}
Seems to be working fine.似乎工作正常。 Try registering the viewport add-on
尝试注册视口附加组件
// main.js
module.exports = {
...
addons: [
...
'@storybook/addon-viewport/register',
],
]
}
Like the docs suggest .就像文档建议的那样。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.