Лучший способ импортировать Sass / CSS файл в компонент Reactjs?

Question

Я использую веб-пакет с моими реактивами, и у меня есть настройка загрузчика 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расширение, чтобы оно работало)

import "../../node_modules/bulma/bulma.sass";import "../../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

Ошибка веб-пакета о том, что он не может разрешить ваш файл CSS, означает, что указанный вами путь неверен.Я бы импортировал файл с расширением, когда вы импортируете sass или css, как в первоначальном примере, где работает css.Это также поможет любому, кто прикасается к вашему коду, узнать, что импортируемый вами файл - это не другой модуль, а стили.

Answer 2

У меня возникла та же проблема, когда я начал с реактив-js, но потом нашел этот шаблон.это лучшая настройка реагирования с редуксом и маршрутизатором.

проверьте это: https://github.com/coryhouse/react-slingshot

, если вы не хотите использовать это, то можете обратиться к этой проблеме.