无法将 sass 集成到 ReactJS 故事书
Posted
技术标签:
【中文标题】无法将 sass 集成到 ReactJS 故事书【英文标题】:Unable to integrated sass to ReactJS storybook 【发布时间】:2021-11-12 23:06:14 【问题描述】:我为 ReactJS 试用了 storybook。我按照这个blog 创建了相同的。一切正常,我能够将应用程序发布到npm。
当我尝试为我的插件添加 SASS 支持时,应用程序无法运行。 CSS 和 CSS 模块工作正常。 我已经浏览了他们的docs。 我还尝试了 github 中 issue 中报告的建议。 我尝试降级我正在使用的包(css-loader、sass-loader、style-loader 和 scss)。这些都没有帮助。
节点版本:16(我也试过 12)
这是我的包裹,json
"name": "plugin",
"version": "0.1.1",
"description": "Starter template to get up and running quickly with React and Storybook",
"main": "dist/index.js",
"private": false,
"files": [
"dist",
"README.md"
],
"license": "MIT",
"peerDependencies": ,
"dependencies":
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
"@testing-library/user-event": "^12.1.10",
"css-loader": "^6.2.0",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-scripts": "4.0.3",
"sass": "^1.41.1",
"sass-loader": "^10.1.0",
"style-loader": "^3.2.1",
"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",
"clean": "rimraf dist",
"compile": "npm run clean && cross-env NODE_ENV=production babel src/stories --out-dir dist --copy-files --ignore __tests__,spec.js,test.js,stories.js,stories.jsx,__snapshots__",
"build-storybook": "build-storybook -s public"
,
"eslintConfig":
"extends": [
"react-app",
"react-app/jest"
],
"overrides": [
"files": [
"**/*.stories.*"
],
"rules":
"import/no-anonymous-default-export": "off"
]
,
"browserslist":
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
,
"devDependencies":
"@babel/cli": "^7.15.4",
"@babel/preset-env": "^7.15.6",
"@babel/preset-react": "^7.14.5",
"@storybook/addon-actions": "^6.3.8",
"@storybook/addon-essentials": "^6.3.8",
"@storybook/addon-links": "^6.3.8",
"@storybook/addon-storyshots": "^6.3.8",
"@storybook/node-logger": "^6.3.8",
"@storybook/preset-create-react-app": "^3.1.7",
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^6.3.8",
"@storybook/testing-react": "^0.0.17",
"cross-env": "^7.0.3",
"react-test-renderer": "^17.0.2"
非常感谢您的帮助。 提前致谢。 如果有人可以指导我使用适当的 SASS 集成的一些示例代码,那也会很有帮助
【问题讨论】:
我不建议关注任何博客教程,通常不是最新的,请使用official documentation。还要检查examples,它们会在每个新版本中更新和测试。 【参考方案1】:您可能知道 Storybook 基于 Webpack 的第四个版本。 今年夏天,这些加载器已更新并停止支持第四版。下面列出了适用于 Webpack 4 的最新兼容加载器及其版本:
style-loader – v2.0.0 css-loader – v5.2.7 sass-loader – v10.1.1只需将加载器降级到此版本,然后重试。
还要确保您配置了 webpack 或将@storybook/preset-scss 安装到“.storybook/main.js”
希望对你有所帮助。
【讨论】:
感谢您的回复,我尝试了您建议的软件包版本并将preset-scss
添加到main.js
,我仍然无法运行它以上是关于无法将 sass 集成到 ReactJS 故事书的主要内容,如果未能解决你的问题,请参考以下文章