[英]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.