Question

目前我有以下目录结构：

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>

然而，在.headerStyle中，div没有使用_Home.scss设置样式。我检查了main.scss的目录路径，它是正确的，我没有收到任何错误。

以下实际应用：

body {
  margin: 0;
  background-color: orange
}

我可能做错了什么？是否有更好的方法将样式表导入组件，而不是每次为组件定义它？

提前感谢您，并将提出/接受答复。

Answer 1

我成功尝试了以下内容（使用纯HTML和Scout-App将SCSS转换为CSS）：

编辑：如上所述，我从未使用过React，但基于此帖hugogiraudel.com，它应该与我的解决方案中的语法相同（或多或少/初看;-)）。

编辑2：我几天前开始使用SCSS。据我所知，你唯一的错误就是我的例子中显示的几个拼写错误。因为＆＃39; body＆＃39;应用我假设组件中的import语句对于React是正确的。

如果有更好的解决方案，必须由其他人回答组件的导入。但看起来链接博客文章的作者有另一种方法，并且还有一个github存储库。

目录结构：

- project_folder
    - index.html
    - stylesheets
        - main.scss
        - partials
            - _all.scss
            - _Home.scss

的index.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';

样式表/分音/ _Home.scss

.headerStyle {
  color: pink;
  font-size: 30px; // I added here pixels because Firefox ignored it otherwise
  font-weight: 500;
}

Answer 2

您已将Webpack配置为使用stylesheets目录，因此您可以使用

import 'main.scss'

而不是

import '../../stylesheets/main.scss'

Answer 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://github.com/jtangelder/sass-loader#imports

组件文件：

import 'stylesheets/main.scss'

此外，您可以通过将〜添加到路径的前面来让webpack解决从sass文件中导入的问题。然后你可以在组件文件中编写导入，然后他们将解析为你的别名：

@import '~stylesheets/modules/_colors.scss'

文档：{{3}}

Answer 4

在你提供的整体代码中，只有一件事是缺少分号（;）使用SCSS时，我们必须使用分号来终止语句。

以下是更新后的代码：

@import 'modules/all';
@import 'partials/all';

html { font-family: 'Roboto', sans-serif; }
body {
  margin: 0;
  background-color: orange;
}

如何在组件的SCSS文件目录中引用？

4 个答案: