使用 webpack 的 React JS 和 Sass-loader 出错答案

【问题标题】：Error with React JS and Sass-loader with webpack使用 webpack 的 React JS 和 Sass-loader 出错
【发布时间】：2017-01-04 22:10:36
【问题描述】：

大家好，

当我尝试使用以下命令编译我的 React JS 应用程序时出现这个奇怪的错误：webpack -w

#
# Fatal error in ../deps/v8/src/api.cc, line 1051
# Check failed: !value_obj->IsJSReceiver() || value_obj->IsTemplateInfo().
#

==== C stack trace ===============================

    0   node                                0x00000001009558d1 v8::base::debug::StackTrace::StackTrace() + 19
    1   node                                0x00000001009545e9 V8_Fatal + 233
    2   node                                0x0000000100144b10 v8::Template::SetAccessorProperty(v8::Local<v8::Name>, v8::Local<v8::FunctionTemplate>, v8::Local<v8::FunctionTemplate>, v8::PropertyAttribute, v8::AccessControl) + 0
    3   binding.node                        0x0000000107004f0e SassTypes::Boolean::get_constructor() + 296
    4   binding.node                        0x0000000107006dba SassTypes::Factory::initExports(v8::Local<v8::Object>) + 326
    5   node                                0x00000001007900c1 node::DLOpen(v8::FunctionCallbackInfo<v8::Value> const&) + 855
    6   node                                0x0000000100169e96 v8::internal::FunctionCallbackArguments::Call(void (*)(v8::FunctionCallbackInfo<v8::Value> const&)) + 378
    7   node                                0x00000001001aae1c v8::internal::MaybeHandle<v8::internal::Object> v8::internal::(anonymous namespace)::HandleApiCallHelper<false>(v8::internal::Isolate*, v8::internal::Handle<v8::internal::HeapObject>, v8::internal::Handle<v8::internal::HeapObject>, v8::internal::Handle<v8::internal::FunctionTemplateInfo>, v8::internal::Handle<v8::internal::Object>, v8::internal::BuiltinArguments) + 915
    8   node                                0x00000001001aa3f9 v8::internal::Builtin_Impl_HandleApiCall(v8::internal::BuiltinArguments, v8::internal::Isolate*) + 281
    9   ???                                 0x000016a6fd6063a7 0x0 + 24906471334823
Illegal instruction: 4

这是调用 Sass 的代码块：

// add custom css / scss
require('style!css!sass!applicationStyles');

在 webpack.config.js 的别名中：

applicationStyles: 'app/styles/app.scss'

在我的 package.json 文件中（在开发依赖项中）：

"node-sass": "^3.4.2",
"sass-loader": "^3.1.2",

有人知道这里出了什么问题吗？

【问题讨论】：

删除!applicationStyles，它不是加载器。这个错误太可怕了！
@AndyRay 但是我是否应该在没有 applicationStyle 的情况下调用我的填充，这是我在 webpack 中的别名来调用我的 css 文件？
你应该为它设置一个加载器，并从你的应用程序的 index.js 文件或任何地方获取你的 css 文件

标签： javascript reactjs sass webpack

【解决方案1】：

我在 UDemy 课程上找到了这个答案，我不能直接在这里发布。

正如@AndyRay 建议的那样，在 webpack.config.js 中创建一个加载器。

装载机：[ {loaders: ['style', 'css', 'sass'], 测试: /.scss$/ } ]
安装最新的

"node-sass": "^3.8.0", "sass-loader": "^4.0.0",
创建你的别名

applicaitonStyles: 'app/styles/app.scss'
需要 scss

require('applicaitonStyles');

【讨论】：