preview 引入scss文件报错 附上错误截图 刚才那个是我安装的依赖版本

Question

Answer 1

张轩 2020-12-18 16:52:46

将addon 中的 @stroybook/preset-scss 插件删除就可以

issue 地址：https://github.com/storybookjs/presets/issues/93#issuecomment-674875605 由于这个插件 和 另外一个 preset-create-react-app 相互冲突

Answer 2

张轩 2020-12-11 23:35:33

同学你好 把源代码发到 git 上面把，不用一点点贴了，我直接用你的项目调试方便多了

• 提问者 慕娘2597344 #1

  https://github.com/zjx0917/viking-fortunate
  
  不好意思 一直忙 才回复

• 提问者 慕娘2597344 #2

  张老师好 可否尽快解决我的问题呢 一直卡在这里 特难受 ❤️

• imoocGly #3

  老师，我昨天使用create-react-app 创建项目，react 安装了18.2.0了，在没有使用storybook 之前发布是成功的，但是使用storybook之后就报错，而且发布也发布不成功了，不知道什么原因，望指导，报错如下：
  1485         _pluginCompat: SyncBailHook<compilation.Compilation>;
                              ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  
  
  Found 89 errors in the same file, starting at: node_modules/@types/webpack/index.d.ts:32
  
  npm ERR! code ELIFECYCLE
  npm ERR! errno 2
  npm ERR! question-editor-design@0.1.0 build-ts: `tsc -p tsconfig.build.json`
  npm ERR! Exit status 2
  npm ERR!
  npm ERR! Failed at the question-editor-design@0.1.0 build-ts script.
  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

点开查看后面3条评论

Answer 3

提问者 慕娘2597344 2020-12-11 13:11:46

main.js 代码如下

module.exports = {

"stories": [

"../src/**/*.stories.mdx",

"../src/**/*.stories.@(js|jsx|ts|tsx)"

],

"addons": [

"@storybook/addon-links",

"@storybook/addon-essentials",

"@storybook/preset-create-react-app",

"@storybook/preset-scss",

]

}

preview.js代码如下：

export const parameters = {

actions: { argTypesRegex: "^on[A-Z].*" },

}

import { addDecorator } from '@storybook/react'

import { withInfo } from '@storybook/addon-info'

import '../src/styles/index.scss'

addDecorator(withInfo);

index.scss代码如下：

// config

@import "variables";

//layout

@import "reboot";

//mixin

@import "mixin";

// animation

@import "animation";

// button

@import "../components/Button/style";

// menu

@import "../components/Menu/style";

Answer 4

提问者 慕娘2597344 2020-12-11 12:58:59

{

"name": "fortunate-rocket",

"version": "0.1.0",

"private": true,

"dependencies": {

"@testing-library/jest-dom": "^5.11.4",

"@testing-library/react": "^11.1.0",

"@testing-library/user-event": "^12.1.10",

"@types/classnames": "^2.2.11",

"@types/jest": "^26.0.15",

"@types/node": "^12.0.0",

"@types/react": "^16.9.53",

"@types/react-dom": "^16.9.8",

"@types/react-transition-group": "^4.4.0",

"classnames": "^2.2.6",

"node-sass": "^4.14.1",

"react": "^17.0.1",

"react-dom": "^17.0.1",

"react-scripts": "3.2.0",

"react-transition-group": "^4.4.1",

"typescript": "4.1.2",

"web-vitals": "^0.2.4"

},

"scripts": {

"start": "react-scripts start",

"build": "react-scripts build",

"test": "react-scripts test",

"eject": "react-scripts eject",

"storybook": "start-storybook -p 6006 -s public",

"build-storybook": "build-storybook -s public"

},

"eslintConfig": {

"extends": [

"react-app",

"react-app/jest"

]

},

"browserslist": {

"production": [

">0.2%",

"not dead",

"not op_mini all"

],

"development": [

"last 1 chrome version",

"last 1 firefox version",

"last 1 safari version"

]

},

"devDependencies": {

"@storybook/addon-actions": "^6.1.10",

"@storybook/addon-controls": "^6.1.10",

"@storybook/addon-essentials": "^6.1.10",

"@storybook/addon-info": "^5.3.21",

"@storybook/addon-links": "^6.1.10",

"@storybook/node-logger": "^6.1.10",

"@storybook/preset-create-react-app": "^3.1.5",

"@storybook/preset-scss": "^1.0.3",

"@storybook/react": "^6.1.10",

"css-loader": "^5.0.1",

"sass-loader": "^10.1.0",

"style-loader": "^2.0.0"

}

}

Answer 5

张轩 2020-12-10 15:29:01

同学你好 把源代码发给看看把 我要确定看一下的版本问题 在本地调试一下

• imoocGly #1

  你好，我现在也遇到这个问题，试了很多办法都解决不了，项目的react版本是17的， @storybook/react  是6.5.9 的，在.storybook/preview.js 里面引入.scss文件不生效，甚至报错，怎么解

• 张轩 回复 imoocGly #2

  同学你好 我们关于 storybook 内容都更新了 请问你是用的老版本的 storybook 吗？建议跟着新版的课程，更新一下对应的 storybook，跟着课程再学习一遍，这个问题就应该不存在了。

• imoocGly 回复 张轩 #3

  是看的新内容哦，昨天才创建的项目，react都到18.2.0版本了，npx storybook init 时报了一堆的 关于 node_modules/@types/webpack/index.d.ts  的错误

点开查看后面2条评论