Jo *_* Ko 12 javascript css sass reactjs webpack
目前我有以下目录结构:
stylesheets
..modules
...._all.scss
...._colors.scss
..partials
...._all.scss
...._Home.scss
..main.scss
在我的_Home.scss身上:
@import '../modules/all';
.headerStyle {
color: pink;
font-size: 15;
font-weight: 500;
}
在我的main.scss导入所有_all.scssin stylesheets文件夹,如:
@import 'modules/all'
@import 'partials/all'
html { font-family: 'Roboto', sans-serif; }
body {
margin: 0;
background-color: orange
}
最后在我的组件中,我会像这样导入样式表:
import '../../stylesheets/main.scss'
...
<div className="headerStyle">Header</div>
然而,在div不被风格化与.headerStyle在_Home.scss.我检查了目录路径main.scss,它是正确的,我没有收到任何错误.
以下实际应用:
body {
margin: 0;
background-color: orange
}
我能做错什么？是否有更好的方法将样式表导入组件,而不是每次为组件定义它？
提前谢谢你,并将upvote /接受答复.
我成功地尝试了以下操作（使用纯 HTML 和Scout-App将 SCSS 转换为 CSS）：
编辑：正如前面提到的，我从未使用过 React，但根据这篇文章hugogiradel.com，它应该与我的解决方案中的语法相同（或多或少/乍一看;-)）。
编辑 2：我自己几天前开始使用 SCSS。据我所知，您唯一的错误是我的示例中显示的几个拼写错误。由于应用了“body”，我假设组件中的 import 语句对于 React 来说是正确的。
如果有更好的解决方案来导入组件，则必须由其他人回答。但看起来链接博客文章的作者有另一种方法，并且还有一个可用的 github 存储库。
目录结构：
- project_folder
- index.html
- stylesheets
- main.scss
- partials
- _all.scss
- _Home.scss
索引.html
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<!-- NOTE: 'css_stylesheets' is the folder where the
Scout-App added the transformed CSS files -->
<link rel="stylesheet" href="css_stylesheets/main.css" type="text/css" />
</head>
<body>
<!-- NOTE: I don't know anything about React but
in HTML the attribute is 'class' not 'className'
Edit 3: 'className' is correct, my bad -->
<div class="headerStyle">Header</div>
</body>
</html>
样式表/main.scss
@import 'partials/all'; // Your missing here a semicolon (;) I think
html { font-family: 'Roboto', sans-serif; }
body {
margin: 0;
background-color: orange; // here too but wasn't crucial
}
样式表/partials/_all.scss
@import '_Home.scss';
样式表/partials/_Home.scss
.headerStyle {
color: pink;
font-size: 30px; // I added here pixels because Firefox ignored it otherwise
font-weight: 500;
}