小编Ham*_*ebi的帖子

我想用 SASS 更改 bootstrap 的默认主题颜色，问题是当我更改颜色并编译时，它会给我无效的 CSS 值错误。

我已阅读文档并在 YouTube 上看到了一些教程，但我看不出问题出在哪里

我正在使用 bootstrap 5.1.0 、 sass 3\n这是我的 scss 文件：

@import "../../node_modules/bootstrap/scss/variables";\n\n$theme-colors: (\n"primary": //some color here,\n);\n\n@import "../../node_modules/bootstrap/scss/bootstrap";\n

这是我在终端中遇到的错误

PS F:\\Coding\\projects\\sepehr\\client\\src\\styles> sass style.scss custom.css\nError: ("primary": #0d6efd, "secondary": #6c757d, "success": #198754, "info": #0dcaf0, \n"warning": #ffc107, "danger": #dc3545, "light": #f8f9fa, "dark": #212529) isn't a valid \nCSS value.\n   \xe2\x95\xb7\n94 \xe2\x94\x82 $theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value") !default;\n   \xe2\x94\x82                             ^^^^^^^^^^^^^\n   \xe2\x95\xb5\n

我想测试我为导航创建的侧边栏是否有效，这是我所做的一个简单示例

<ul>
  <li><Link to="/location1">location 1</Link></li>
  <li><Link to="/location2">location 2</Link></li>
</ul>

这是我的测试

const routerWrapper = ({children}) => <BrowserRouter>{children}</BrowserRouter>

// The first one runs fine
it('navigation to location 1' , () => {
render(<SideBar/> , {wrapper:routerWrapper})
// get the element and click on it
// check if title of page is correct
})

it('navigation to location 2' , () => {
render(<SideBar/> , {wrapper:routerWrapper})
// can't run because location is at /location1
})

当我使用 RTL 测试导航时，第一个测试运行良好，但之后位置仍保留在该目录中以进行下一个测试，如何在每次测试后清除位置？或者有什么建议我应该如何测试导航？

我希望能够将 nextjs 13 应用程序目录中的 page.tsx 文件重命名为 theRouteName.page.tsx 或类似的名称。因为如果所有页面都命名为 page.tsx，那么在 IDE 中处理多个页面会很痛苦，我知道我们可以为 VS code 等编写某种插件，但这不是我的选择。有任何想法吗？