scss怎么在react项目中用?我这样用报错
//app.js
import './app.scss';
//app.scss
$vw_fontsize: 75;
@function rem($px) {
@return ($px / $vw_fontsize ) * 1rem;
}
$vw_design: 750;
html {
font-size:($vw_fontsize / ($vw_design / 2)) * 100vw;
@media screen and (max-width: 320px) {
font-size: 64px;
}
@media screen and (min-width: 540px) {
font-size: 108px;
}
}
body {
max-width: 540px;
min-width: 320px;
}
.mod_nav {
background-color: #fff;
&_list {
display: flex;
padding: vw(15) vw(10) vw(10); // 内间距
&_item {
flex: 1;
text-align: center;
font-size: vw(10); // 字体大小
&_logo {
display: block;
margin: 0 auto;
width: vw(40); // 宽度
height: vw(40); // 高度
img {
display: block;
margin: 0 auto;
max-width: 100%;
}
}
&_name {
margin-top: vw(2);
}
}
}
}
^
Property " " must be followed by a ':'
in C:\Users\Administrator\Desktop\my-app\src\app.scss (line 7, column 55)
为什么报这个错。文档上说不是对空格不敏感吗?
补充
//这是我在webpack.config.dev里面的配置
{
test:/\.scss$/,
use: [
{
loader: "style-loader" // 将 JS 字符串生成为 style 节点
}, {
loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
}, {
loader: "sass-loader" // 将 Sass 编译成 CSS
}, {
loader: "scss-loader" // 将 Sass 编译成 CSS
}
]
}
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
问题解决了,末尾多了一个空格
需要在webpack中添加scss的
loader