Question

我正在使用webpack和我的reactjs，我确实有sass loader设置，但我想知道我是否正确地导入文件（它有效，但我只是想知道最好的做法是这样做）< / p>

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＆＃34; ../../ node_modules / bulma / bulma.sass＆＃34 ;; import＆＃34; ../../ node_modules / bulma-steps-component / bulma-steps.sass＆＃34 ;;

但现在我得到了

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工作的初始示例中一样。这也将帮助其他任何人触摸你的代码，知道你导入的不是另一个模块，而是样式。

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

2 个答案: