[英]Unable to use imported SASS styles in my React js project
我遵循了我在大多数项目中使用的导入 SASS 样式的相同过程。 我创建了我的反应应用程序。 使用以下命令安装 SASS npm install node-sass
我将 SASS 文件导入到我的应用程序组件中,如下所示:
import React from "react";
import { ProvideAuth, useAuth } from "./use-auth.js";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import './test.scss';
function App() {
const auth = useAuth();
return (
<ProvideAuth>
<Router>
<nav>
<div>
<Link to='/'>Home</Link>
<Link to='/about'>About</Link>
</div>
<div>
<button onClick={() => auth.signin()}>Sign In</button>
<button onClick={() => auth.signout()}>Sign Out</button>
</div>
</nav>
<Switch>
<Route exact path="/">
home
</Route>
<Route path="/about">
about
</Route>
</Switch>
</Router>
</ProvideAuth>
);
}
export default App;
这个 SASS 文件 'test.scss' 与 App.js 保存在同一个文件夹中,为了测试,我保留了这个 SASS 文件的内容非常基本:
nav{
display: flex;
background: blue;
}
该项目编译没有任何错误,但没有应用我的任何样式。 下面是我的项目的 package.json:
{
"name": "wally",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.14.1",
"@testing-library/react": "^11.2.7",
"@testing-library/user-event": "^12.8.3",
"firebase": "^8.7.1",
"node-sass": "^6.0.1",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^5.2.0",
"react-scripts": "^1.1.5",
"web-vitals": "^1.1.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"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"
]
}
}
好吧,我对自己的问题没有真正的答案,但我有效地重建了项目,并且一切似乎都运行良好。 有效地将其关闭并再次打开。
我查看了其他一些类似的问题,有些人在将 sass 与 react-router 集成时遇到了问题。 不太确定这是否与我的特定问题有关,尽管如此,从 new 重新安装所有内容似乎可以解决问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.