将 Sass/CSS 文件导入 Reactjs 组件的最佳方法？

Question

我在我的 reactjs 中使用 webpack，并且我确实设置了 sass 加载程序，但我想知道我是否以正确的方式导入文件（它有效，但我只是想知道这样做是否是最佳实践）

import hamburger from "../../node_modules/hamburgers/dist/hamburgers.css";
import bulma from "../../node_modules/bulma/bulma";


 module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.s?css$/,
        use: [
          {
            loader: "style-loader" // creates style nodes from JS strings
          },
          {
            loader: "css-loader" // translates CSS into CommonJS
          },
          {
            loader: "sass-loader" // compiles Sass to CSS
          }
        ]
      }
    ]
  },

编辑

当我尝试在其中导入 sass 文件时出现错误

import  "../../node_modules/bulma/bulma";
import "../../node_modules/bulma-steps-component/bulma-steps";

它们都有 .sass 的扩展名

 Error: Can't resolve '../../node_modules/bulma-steps-component/bulma-steps'

我需要再次检查吗？

编辑 2

我尝试添加此检查

  test: /(\.css|\.scss|\.sass)$/,
    use: [
      {
        loader: "style-loader" // creates style nodes from JS strings
      },
      {
        loader: "css-loader" // translates CSS into CommonJS
      },
      {
        loader: "sass-loader" // compiles Sass to CSS
      }
    ]

并做到了（我需要 .sass 扩展名才能使其工作）

导入“../../node_modules/bulma/bulma.sass”； 导入“../../node_modules/bulma-steps-component/bulma-steps.sass”；

但现在我明白了

ERROR in ./node_modules/bulma-steps-component/bulma-steps.sass (./node_modules/css-loader!./node_modules/sass-loader/lib/loader.js!./node_modules/bulma-steps-component/bulma-steps.sass)
Module build failed:
$steps-default-color: $grey-lighter !default
$steps-completed-color: $primary !default
$steps-active-color: $primary !default
$steps-horizontal-min-width: 10em !default
$steps-vertical-min-height: 4em !default
$steps-marker-size: 2 !default
$steps-divider-size: .4em !default
$steps-gap-size: .3rem !default
$steps-hollow-border-size: .3em !default
$steps-thin-divider-size: 1px !default
$steps-thin-marker-size: .8em !default

它一直在运行（几乎好像它向我展示了文件中的所有代码）但错误似乎是Undefined variable: "$grey-lighter".

Answer 1

当我开始使用 react-js 时，我遇到了同样的问题，但后来我发现了这个样板。这是与 redux 和路由器反应的最佳设置。

看看这个：https://github.com/coryhouse/react-slingshot

如果你不想使用这个，那么你可以参考这个来解决你的问题。

Answer 2

webpack 错误说它无法解析您的 CSS 文件意味着您指定的路径不正确。当您导入 sass 或 css 时，我会导入带有扩展名的文件，就像在 css 工作的初始示例中一样。这也将有助于其他接触您的代码的人知道您正在导入的不是另一个模块，而是样式。