配置 scss prprocessors vuejs

问题描述

有什么问题

在我的 Vuejs 项目配置期间,我遇到了一个有问题的问题。当我尝试从 node-sass [Sass/SCSS (with node-sass)] 配置 scss 预处理器时,我的控制台抛出错误

我的配置

node --version
v16.4.0

vue --version
@vue/cli 4.5.13

错误

npm ERR! path /home/szymonm/Desktop/Vue/test8/node_modules/node-sass
npm ERR! command failed
npm ERR! command sh -c node-gyp rebuild
npm ERR! make: Entering directory '/home/szymonm/Desktop/Vue/test8/node_modules/node-sass/build'
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/ast.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/ast_fwd_decl.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/backtrace.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/base64vlq.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/bind.o
npm ERR!   CC(target) Release/obj.target/libsass/src/libsass/src/cencode.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/check_nesting.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/color_maps.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/constants.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/context.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/cssize.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/emitter.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/environment.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/error_handling.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/eval.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/expand.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/extend.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/file.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/functions.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/inspect.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/json.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/lexer.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/listize.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/memory/SharedPtr.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/node.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/operators.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/output.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/parser.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/plugins.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/position.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/prelexer.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/remove_placeholders.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/sass.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/sass2scss.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/sass_context.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/sass_functions.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/sass_util.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/sass_values.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/source_map.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/subset_map.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/to_c.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/to_value.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/units.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/utf8_string.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/util.o
npm ERR!   CXX(target) Release/obj.target/libsass/src/libsass/src/values.o
npm ERR!   AR(target) Release/obj.target/src/sass.a
npm ERR!   COPY Release/sass.a
npm ERR!   CXX(target) Release/obj.target/binding/src/binding.o
npm ERR! make: Leaving directory '/home/szymonm/Desktop/Vue/test8/node_modules/node-sass/build'
npm ERR! (node:114997) [DEP0150] DeprecationWarning: Setting process.config is deprecated. In the future the property will be read-only.
npm ERR! (Use `node --trace-deprecation ...` to show where the warning was created)
npm ERR! ../src/libsass/src/cencode.c: In function ‘base64_encode_block’:
npm ERR! ../src/libsass/src/cencode.c:48:11: warning: this statement may fall through [-Wimplicit-fallthrough=]
npm ERR!    48 |    result = (fragment & 0x003) << 4;
npm ERR!       |    ~~~~~~~^~~~~~~~~~~~~~~~~~~~~~~~~
npm ERR! ../src/libsass/src/cencode.c:52:2: note: here
npm ERR!    52 |  case step_B:
npm ERR!       |  ^~~~
npm ERR! ../src/libsass/src/cencode.c:62:11: warning: this statement may fall through [-Wimplicit-fallthrough=]
npm ERR!    62 |    result = (fragment & 0x00f) << 2;
npm ERR!       |    ~~~~~~~^~~~~~~~~~~~~~~~~~~~~~~~~
npm ERR! ../src/libsass/src/cencode.c:66:2: note: here
npm ERR!    66 |  case step_C:
npm ERR!       |  ^~~~
npm ERR! ../src/libsass/src/functions.cpp: In function ‘void Sass::Functions::handle_utf8_error(const Sass::ParserState&,Sass::Backtraces)’:
npm ERR! ../src/libsass/src/functions.cpp:110:20: warning: catching polymorphic type ‘class utf8::invalid_code_point’ by value [-Wcatch-value=]
npm ERR!   110 |       catch (utf8::invalid_code_point) {
npm ERR!       |                    ^~~~~~~~~~~~~~~~~~
npm ERR! ../src/libsass/src/functions.cpp:114:20: warning: catching polymorphic type ‘class utf8::not_enough_room’ by value [-Wcatch-value=]
npm ERR!   114 |       catch (utf8::not_enough_room) {
npm ERR!       |                    ^~~~~~~~~~~~~~~
npm ERR! ../src/libsass/src/functions.cpp:118:20: warning: catching polymorphic type ‘class utf8::invalid_utf8’ by value [-Wcatch-value=]
npm ERR!   118 |       catch (utf8::invalid_utf8) {
npm ERR!       |                    ^~~~~~~~~~~~
npm ERR! ../src/libsass/src/json.cpp: In function ‘char* json_encode_string(const char*)’:
npm ERR! ../src/libsass/src/json.cpp:405:15: warning: catching polymorphic type ‘class std::exception’ by value [-Wcatch-value=]
npm ERR!   405 |   catch (std::exception) {
npm ERR!       |               ^~~~~~~~~
npm ERR! ../src/libsass/src/json.cpp: In function ‘char* json_stringify(const JsonNode*,const char*)’:
npm ERR! ../src/libsass/src/json.cpp:424:15: warning: catching polymorphic type ‘class std::exception’ by value [-Wcatch-value=]
npm ERR!   424 |   catch (std::exception) {
npm ERR!       |               ^~~~~~~~~
npm ERR! In file included from /home/szymonm/.node-gyp/16.4.0/include/node/v8.h:30,npm ERR!                  from /home/szymonm/.node-gyp/16.4.0/include/node/node.h:63,npm ERR!                  from ../../nan/nan.h:56,npm ERR!                  from ../src/binding.cpp:1:
npm ERR! /home/szymonm/.node-gyp/16.4.0/include/node/v8-internal.h: In function ‘void v8::internal::PerformCastCheck(T*)’:
npm ERR! /home/szymonm/.node-gyp/16.4.0/include/node/v8-internal.h:454:38: error: ‘remove_cv_t’ is not a member of ‘std’; did you mean ‘remove_cv’?
npm ERR!   454 |             !std::is_same<Data,std::remove_cv_t<T>>::value>::Perform(data);
npm ERR!       |                                      ^~~~~~~~~~~
npm ERR!       |                                      remove_cv
npm ERR! /home/szymonm/.node-gyp/16.4.0/include/node/v8-internal.h:454:38: error: ‘remove_cv_t’ is not a member of ‘std’; did you mean ‘remove_cv’?
npm ERR!   454 |             !std::is_same<Data,std::remove_cv_t<T>>::value>::Perform(data);
npm ERR!       |                                      ^~~~~~~~~~~
npm ERR!       |                                      remove_cv
npm ERR! /home/szymonm/.node-gyp/16.4.0/include/node/v8-internal.h:454:50: error: template argument 2 is invalid
npm ERR!   454 |             !std::is_same<Data,std::remove_cv_t<T>>::value>::Perform(data);
npm ERR!       |                                                  ^
npm ERR! /home/szymonm/.node-gyp/16.4.0/include/node/v8-internal.h:454:63: error: ‘::Perform’ has not been declared
npm ERR!   454 |             !std::is_same<Data,std::remove_cv_t<T>>::value>::Perform(data);
npm ERR!       |                                                               ^~~~~~~
npm ERR! ../src/binding.cpp: In function ‘Nan::NAN_METHOD_RETURN_TYPE render(Nan::NAN_METHOD_ARGS_TYPE)’:
npm ERR! ../src/binding.cpp:284:98: warning: cast between incompatible function types from ‘void (*)(uv_work_t*)’ {aka ‘void (*)(uv_work_s*)’} to ‘uv_after_work_cb’ {aka ‘void (*)(uv_work_s*,int)’} [-Wcast-function-type]
npm ERR!   284 |     int status = uv_queue_work(uv_default_loop(),&ctx_w->request,compile_it,(uv_after_work_cb)MakeCallback);
npm ERR!       |                                                                                                  ^~~~~~~~~~~~
npm ERR! ../src/binding.cpp: In function ‘Nan::NAN_METHOD_RETURN_TYPE render_file(Nan::NAN_METHOD_ARGS_TYPE)’:
npm ERR! ../src/binding.cpp:320:98: warning: cast between incompatible function types from ‘void (*)(uv_work_t*)’ {aka ‘void (*)(uv_work_s*)’} to ‘uv_after_work_cb’ {aka ‘void (*)(uv_work_s*,int)’} [-Wcast-function-type]
npm ERR!   320 |     int status = uv_queue_work(uv_default_loop(),(uv_after_work_cb)MakeCallback);
npm ERR!       |                                                                                                  ^~~~~~~~~~~~
npm ERR! In file included from ../../nan/nan.h:56,npm ERR!                  from ../src/binding.cpp:1:
npm ERR! ../src/binding.cpp: At global scope:
npm ERR! /home/szymonm/.node-gyp/16.4.0/include/node/node.h:806:43: warning: cast between incompatible function types from ‘void (*)(Nan::ADDON_REGISTER_FUNCTION_ARGS_TYPE)’ {aka ‘void (*)(v8::Local<v8::Object>)’} to ‘node::addon_register_func’ {aka ‘void (*)(v8::Local<v8::Object>,v8::Local<v8::Value>,void*)’} [-Wcast-function-type]
npm ERR!   806 |       (node::addon_register_func) (regfunc),\
npm ERR!       |                                           ^
npm ERR! /home/szymonm/.node-gyp/16.4.0/include/node/node.h:840:3: note: in expansion of macro ‘NODE_MODULE_X’
npm ERR!   840 |   NODE_MODULE_X(modname,regfunc,NULL,0)  // NOLINT (readability/null_usage)
npm ERR!       |   ^~~~~~~~~~~~~
npm ERR! ../src/binding.cpp:358:1: note: in expansion of macro ‘NODE_MODULE’
npm ERR!   358 | NODE_MODULE(binding,RegisterModule);
npm ERR!       | ^~~~~~~~~~~
npm ERR! make: *** [binding.target.mk:133: Release/obj.target/binding/src/binding.o] Error 1
npm ERR! gyp ERR! build error 
npm ERR! gyp ERR! stack Error: `make` failed with exit code: 2
npm ERR! gyp ERR! stack     at ChildProcess.onExit (/home/szymonm/Desktop/Vue/test8/node_modules/node-gyp/lib/build.js:262:23)
npm ERR! gyp ERR! stack     at ChildProcess.emit (node:events:394:28)
npm ERR! gyp ERR! stack     at Process.ChildProcess._handle.onexit (node:internal/child_process:290:12)
npm ERR! gyp ERR! System Linux 5.4.0-77-generic
npm ERR! gyp ERR! command "/usr/local/bin/node" "/home/szymonm/Desktop/Vue/test8/node_modules/.bin/node-gyp" "rebuild"
npm ERR! gyp ERR! cwd /home/szymonm/Desktop/Vue/test8/node_modules/node-sass
npm ERR! gyp ERR! node -v v16.4.0
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/szymonm/.npm/_logs/2021-07-06T09_44_34_923Z-debug.log
 ERROR  command failed: npm install --loglevel error --legacy-peer-deps

这个错误特别令人困惑,因为 vuejs 与来自 d​​art-sass 的预处理器完美配合,只有“节点相关”会导致问题。我会很高兴得到任何帮助,谢谢。

感谢您的帮助!

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)

相关问答

错误1:Request method ‘DELETE‘ not supported 错误还原:...
错误1:启动docker镜像时报错:Error response from daemon:...
错误1:private field ‘xxx‘ is never assigned 按Alt...
报错如下,通过源不能下载,最后警告pip需升级版本 Requirem...