个人中心
文章发布
退出
作者热门文章
- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库？
- java - OnItemClickListener 不起作用，但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
25
4
目前我的目录结构如下:
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.scss 导入如下:
@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>
但是，在 _Home.scss 中，div 没有使用 .headerStyle 设置样式。我检查了 main.scss 的目录路径，它是正确的，我没有收到任何错误。
实际应用的是:
body {
margin: 0;
background-color: orange
}
我做错了什么？有没有更好的方法将样式表导入组件而不是每次都为组件定义样式表？
预先感谢您并将投票/接受答案。
最佳答案
我成功地尝试了以下操作(使用纯 HTML 和 Scout-App 将 SCSS 转换为 CSS):
编辑:如前所述，我从未使用过 React，但基于这篇文章 hugogiraudel.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
}
样式表/部分/_all.scss
@import '_Home.scss';
stylesheets/partials/_Home.scss
.headerStyle {
color: pink;
font-size: 30px; // I added here pixels because Firefox ignored it otherwise
font-weight: 500;
}
关于javascript - 如何从组件中引用 SCSS 文件的目录？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41732067/
25
4
0
我正在为我的程序编写安装脚本，它应该在 Linux/Unix 操作系统上运行。以下文件的默认目录是什么: 可执行文件(程序)。程序应通过从命令行键入其名称来执行。 共享库。 第三方共享库(程序未开源，
我有一堆用户、组和应用程序注册，我的 MVC 应用程序使用 AAD 数据进行身份验证和授权。是否可以将 Azure Active Directory 从一个租户(目录)迁移到另一个租户(目录)？如果可
查看 cljsbuild 文档 https://github.com/emezeske/lein-cljsbuild :cljsbuild { :builds [{ ; The
忽略已经版本控制的文件 如果你不小心添加了一些应该被忽略的文件，你如何将它们从版本控制中去除而不会丢失它们？或许你有自己的IDE配置文件，不是项目的一部分，但将会花费很多时间使之按照自己的方式工作。
我想使用\tableofcontents 命令，但没有目录从新页面开始或在末尾创建新页面，并且所有内容都是单倍行距。我怎样才能做到这一点？我假设使用 tocloft，但有哪些选择？ 谢谢 最佳答案 试
我有一些 javascript 菜单代码，可以在单独的目录中正常工作。但是，当我尝试从同一目录中调用相同的 .js 文件时，它不会看到这些文件。 以下内容来自另一个目录: script type="t
我有这样的路径: /my/path/to/important_folder 在同一级别上，我还有其他文件和文件夹想要在达到与 important_folder 相同的级别时列出。 我的文件夹可能更深，
1、获取文件路径实现 1.1 获取当前文件路径 ? 1
我正在使用最新版本的 NTEmacs。 我写了一个名为“.dir-locals.el”的文件，如下所示。 ((nil . ((tab-width . 8) (fill-column .
关闭。这个问题不满足Stack Overflow guidelines .它目前不接受答案。 想改善这个问题吗？更新问题，使其成为 on-topic对于堆栈溢出。 7年前关闭。 Improve thi
在我的 .vimrc 中有这些行 :set foldmethod=marker :set foldmarker=SECTION:,ENDSECTION: 用于自定义代码折叠。在我的文件中，相关语言的注
在 fish 中: for x in * echo $x end *这里包括所有目录和文件，如何只列出文件(或目录)？ 最佳答案 fish 没有很多花哨的通配语法。但是，目录可以像这样迭代: f
这是我的目录结构: ├── src │ ├── helpers │ │ ├── __init__.py │ │ ├── foo.py │ │ └── bar.py │
我想递归重命名文件夹/目录名称并找到 this solution所以。但是这个命令没有效果 find . -type f -exec rename 's/old/new/' '{}' \; 这是一个正
我想在相册中创建一个文件夹，并希望将图像保存在创建的相册中。 这可能吗？有什么办法可以做到这一点吗？ 我已经搜索过，大多数人都说这是不可能的。 感谢您的帮助。 最佳答案 您也许可以使用AssetsLi
如何在python中使用用户定义的名称创建临时文件/目录。我知道 tempfile .但是我看不到任何以文件名作为参数的函数。 注意:我需要这个来对包含临时文件的临时目录上的 glob(文件名模式匹配
我在项目中使用JaCoCo Gradle插件。 作为问题的一个示例，我的大部分代码都在com.me.mysoftware包下。 我正在使用代码生成器来生成build/generated/java/..
我正在尝试使用 Gradle 开始运行 jar 文件 我的任务如下所示: task startServer(type: Exec) { workingDir file("${buildDir}/a
如何在 Ant 中定义一个目录集，其中包括两个目录:项目的基目录和子目录“test”？ 看起来您无法使用“/”、“.”或“”专门包含目录集的根目录。例如，这包括“./test”，但不包括“.”:
我正在使用 CTAGs 包，它使用 Sublime Text 2 生成两个文件 .tags 和 .tags_sorted_by_file。 那么当我进行项目搜索(CMD + SHIFT + F)时，如
我是一名优秀的程序员,十分优秀！