Javascript 如何从组件引用SCSS文件的目录？_Javascript_Css_Reactjs_Sass_Webpack

Javascript 如何从组件引用SCSS文件的目录？

javascript css reactjs sass webpack

Javascript 如何从组件引用SCSS文件的目录？,javascript,css,reactjs,sass,webpack,Javascript,Css,Reactjs,Sass,Webpack,目前我有以下目录结构： stylesheets ..modules ...._all.scss ...._colors.scss ..partials ...._all.scss ...._Home.scss ..main.scss - project_folder - index.html - stylesheets - main.scss - partials - _all.scss - _Ho

目前我有以下目录结构：

stylesheets
..modules
...._all.scss
...._colors.scss
..partials
...._all.scss
...._Home.scss
..main.scss

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

在我的

\u Home.scss

中，我有：

@import '../modules/all';

.headerStyle {
  color: pink;
  font-size: 15;
  font-weight: 500;
}

在我的

main.scss

中，我导入样式表文件夹中的所有

\u 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>

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

提前感谢您，我们将投票/接受答案

我成功地尝试了以下方法（使用纯HTML和将SCS转换为CSS）：

编辑：如前所述，我从未使用过React，但基于本文，它的语法应该与我的解决方案中的语法相同（或多或少/乍一看；-）

编辑2：我几天前才开始使用SCS。据我所知，您唯一的错误是我的示例中显示的少数打字错误。由于应用了“body”，我假设组件中的import语句对于React是正确的

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

目录结构：

stylesheets
..modules
...._all.scss
...._colors.scss
..partials
...._all.scss
...._Home.scss
..main.scss

- 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>

样式表/partials/_all.scs

@import '_Home.scss';

样式表/partials/_Home.scss

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

您已将Webpack配置为使用

样式表

目录，以便可以使用

import 'main.scss'

而不是

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

@fingerpich找到了一个很好的解决方案，可以简化您的路径。您可以为样式表目录设置别名，然后始终相对于该目录导入：

网页包配置：

{
  resolve: {
    alias: {
      // the path needs to resolve relative to the files where you're importing them
      stylesheets: path.resolve(__dirname, '../stylesheets')
    }
  }
}

文件：

组件文件：

import 'stylesheets/main.scss'

您还可以通过在路径的前面添加~来让webpack解析从sass文件内部导入的内容。然后，您可以像在组件文件中一样在那里写入导入，它们将解析为您的别名：

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

文档：

在您提供的整个代码中，只有一件事是缺少分号（；）在使用SCS时，我们必须使用分号来终止语句

以下是更新的代码：

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

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

您是否正在将

\u Home.scss

导入

partials/\u all.scss

@import'Home'

首先，在

@import'modules/all'

中是否有打字错误？不应该是

\u all

？其次，

\u all.scss

文件的内容是什么？实际上是在类似

的

上尝试的，但不起作用。您是否可以提供React的呈现html？如果您使用“style”属性来设置的样式是否有效？根据材料ui文档和本文，内联样式可能是您的问题。但我现在只是在猜测。如果这不是问题的话，就需要有更有经验的人来解决；-）