如何从组件中引用 SCSS 文件的目录？
Posted
技术标签:
【中文标题】如何从组件中引用 SCSS 文件的目录？【英文标题】：How to reference in directory of SCSS file from component? 【发布时间】：2017-06-03 13:52:30 【问题描述】：目前我的目录结构如下：
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 中没有使用.headerStyle 设置div。我检查了main.scss 的目录路径，它是正确的，我没有收到任何错误。
实际上正在应用以下内容：
body
margin: 0;
background-color: orange
我可能做错了什么？有没有更好的方法将样式表导入组件，而不是每次都为组件定义它？
在此先感谢您，并将投票/接受答案。
【问题讨论】：
您是否将_Home.scss 导入partials/_all.scss？ @import 'Home'
首先，这是@import 'modules/all' 的错字吗？不应该是_all吗？其次，_all.scss文件的内容是什么？
【参考方案1】：
我成功地尝试了以下方法（使用纯 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
样式表/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;
【讨论】：
实际上是在material-ui.com/#/components/table 的<TableHeaderColumn> 上尝试过，比如<TableHeaderColumn className="headerStyle">，但是没有用。
有没有可以提供 React 渲染的 html？如果你使用'style'属性来设置您已将 Webpack 配置为使用 stylesheets 目录，因此您可以使用
import 'main.scss'
而不是
import '../../stylesheets/main.scss'
【讨论】：
【参考方案3】：@fingerpich 找到了一个让你的路径更简单的好解决方案。您可以为样式表目录设置别名，然后始终相对于该目录导入：
Webpack 配置：
resolve:
alias:
// the path needs to resolve relative to the files where you're importing them
stylesheets: path.resolve(__dirname, '../stylesheets')
文档：https://webpack.github.io/docs/configuration.html#resolve-alias
组件文件：
import 'stylesheets/main.scss'
您还可以通过在路径的前面添加 ~ 来让 webpack 从 sass 文件中解析导入。然后，您可以像在组件文件中一样在那里编写导入，它们将解析为您的别名：
@import '~stylesheets/modules/_colors.scss'
文档：https://github.com/jtangelder/sass-loader#imports
【讨论】：
【参考方案4】：在您提供的整个代码中，只有一件事是缺少分号（;） 在使用 SCSS 时，我们必须使用分号来终止语句。
这是更新后的代码：
@import 'modules/all';
@import 'partials/all';
html font-family: 'Roboto', sans-serif;
body
margin: 0;
background-color: orange;
【讨论】：
以上是关于如何从组件中引用 SCSS 文件的目录？的主要内容，如果未能解决你的问题，请参考以下文章
如何在子组件 scss 文件中覆盖 main.component.scss 中的 css
Angular 初始化项目后，如何把默认的 .css 文件修改为 .scss 文件？
如何在 rails 6/webpacker 中引用 scss 文件路径？