如何在创建带有typescript的react应用程序中使用sass

Question

我使用create-react-app和typescript创建了一个新项目，并在我的项目中添加了一个sass文件(在create-react-app文档中，它说它开箱即用地支持sass文件(，但我的sass文件出现了以下错误：

Failed to compile.
./src/homepage.style.sass (./node_modules/css-loader/dist/cjs.js??ref--6-oneOf-5-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--6-oneOf-5-3!./node_modules/sass-loader/dist/cjs.js??ref--6-oneOf-5-4!./src/homepage.style.sass)
SassError: Invalid CSS after ".homepage {": expected "}", was "{"
on line 1 of /home/taghi/wt-projects/react-ecommerce/src/homepage.style.sass
>> .homepage { {
-----------^

这是我的Sass文件内容：

.homepage {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 80px;
}
.directory-menu {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.menu-item {
min-width: 30%;
height: 240px;
flex: 1 1 auto;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid black;
margin: 0 7.5px 15px;
&:first-child {
margin-right: 7.5px;
}
&:last-child {
margin-left: 7.5px;
}
.content {
height: 90px;
padding: 0 25px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border: 1px solid black;
.title {
font-weight: bold;
margin-bottom: 6px;
font-size: 22px;
color: #4a4a4a;
}
.subtitle {
font-weight: lighter;
font-size: 16px;
}
}
}

如有任何帮助，将不胜感激

Answer 1

Sass不需要花括号和分号。所以它应该是这样的，

.homepage display: flex flex-direction: column align-items: center padding: 20px 80px

您只需删除当前CSS代码或json格式化程序中的大括号和分号，即可将CSS转换为SASS。

Answer 2

它不需要"｛｝"，只使用缩进

.homepage 
display: flex;
flex-direction: column;
align-items: center;
padding: 20px 80px;