preview.js 里面引入scss样式不生效
来源:8-3 Storybook 创建第一个 story

imoocGly
2022-07-23
main.js 代码如下:
module.exports = {
"stories": [
"../src/**/*.stories.mdx",
"../src/**/*.stories.@(js|jsx|ts|tsx)"
],
"addons": [
"@storybook/addon-links",
"@storybook/addon-essentials",
"@storybook/addon-interactions",
"@storybook/preset-create-react-app"
],
"framework": "@storybook/react",
"core": {
"builder": "@storybook/builder-webpack5"
}
}
preview.js 代码如下:
import '../src/styles/index.scss';
export const parameters = {
actions: { argTypesRegex: "^on[A-Z].*" },
controls: {
matchers: {
color: /(background|color)$/i,
date: /Date$/,
},
},
}
package.json 如下:
{
"name": "pm-design",
"version": "0.1.0",
"description": "UI component library of a test paper detail display page",
"author": "gly",
"private": false,
"main": "dist/index.js",
"module": "dist/index.js",
"types": "dist/index.d.ts",
"dependencies": {
"@testing-library/jest-dom": "^5.16.4",
"@testing-library/react": "^13.3.0",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^27.5.2",
"@types/node": "^16.11.45",
"@types/react": "^18.0.15",
"@types/react-dom": "^18.0.6",
"antd": "^4.21.7",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"typescript": "^4.7.4",
"web-vitals": "^2.1.4"
},
"peerDependencies": {
"react": ">=16.8.0",
"react-dom": ">=16.8.0",
"antd": ">=4.16.2"
},
"scripts": {
"start": "react-scripts start",
"clean": "rimraf ./dist",
"build": "npm run clean && npm run build-css && npm run build-ts",
"build-css": "node-sass ./src/styles/index.scss ./dist/index.css",
"build-ts": "tsc -p tsconfig.build.json",
"test": "react-scripts test",
"eject": "react-scripts eject",
"prepublish": "npm run build",
"storybook": "start-storybook -p 6006 -s public",
"build-storybook": "build-storybook"
},
"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": {
"@babel/core": "^7.18.9",
"@storybook/addon-actions": "^6.5.9",
"@storybook/addon-essentials": "^6.5.9",
"@storybook/addon-interactions": "^6.5.9",
"@storybook/addon-links": "^6.5.9",
"@storybook/builder-webpack5": "^6.5.9",
"@storybook/manager-webpack5": "^6.5.9",
"@storybook/preset-create-react-app": "^4.1.2",
"@storybook/react": "^6.5.9",
"@storybook/testing-library": "0.0.13",
"@types/lodash": "^4.14.182",
"babel-loader": "^8.2.5",
"classnames": "^2.3.1",
"loadash": "^1.0.0",
"node-sass": "^7.0.1",
"rimraf": "^3.0.2",
"sass": "^1.54.0",
"sass-loader": "^13.0.2"
}
}
根据教程一模一样操作的,为什么引入scss不生效呢?
写回答
1回答
-
张轩
2022-07-24
同学你好
我直接用你的 repo 导入了 import '../src/styles/index.scss';
发现样式是生效的,请看截图:
我看你还没有写 story,它原本带的那个 Button 组件不是我们写的那个 button 组件,你是不是把两者
弄混淆了呢?
00