uni-app uniapp install sass-loader error

ubof19bj  于 2021-11-27  发布在  Java
关注(0)|答案(7)|浏览(603)

问题描述

[问题描述：尽可能简洁清晰地把问题描述清楚]

创建项目的方式：vue create -p dcloudio/uni-preset-vue my-project

由于我的项目中用到scss具体使用 如下：

index.vue

<style lang="scss" scoped>
@import url("./index.scss");
</style>

index.scss

.mine{
    .m-account{
        position: relative;
        height: 220rpx;
        background: url("../../bg.png");
        background-size: 100% 100%;
    }
}

提示我去安装sass-loader, 但是我执行npm install sass-loader --save-dev之后，出现如下阿错误

ERROR  Failed to compile with 1 error                                                                                                                        10:42:03 AM

 error  in ./src/pages/mine/index.vue?vue&type=style&index=0&id=4bd6864f&lang=scss&scoped=true&

Syntax Error: TypeError: this.getOptions is not a function

 @ ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/h5-vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader??ref--8-oneOf-1-2!./node_modules/postcss-loader/src??ref--8-oneOf-1-3!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader??ref--8-oneOf-1-5!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib??vue-loader-options!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-scoped-loader!./src/pages/mine/index.vue?vue&type=style&index=0&id=4bd6864f&lang=scss&scoped=true& 4:14-814 14:3-18:5 15:22-822
 @ ./src/pages/mine/index.vue?vue&type=style&index=0&id=4bd6864f&lang=scss&scoped=true&
 @ ./src/pages/mine/index.vue
 @ ./src/pages.json
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.52:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

然后我卸载sass-loader之后 安装了10.2.0的版本，依然有如下错误

ERROR  Failed to compile with 1 error                                                                                                                        10:45:39 AM

 error  in ./src/pages/mine/index.vue?vue&type=style&index=0&id=4bd6864f&lang=scss&scoped=true&

Syntax Error: TypeError: Cannot read property 'toString' of undefined

 @ ./node_modules/@dcloudio/vue-cli-plugin-uni/packages/h5-vue-style-loader??ref--8-oneOf-1-0!./node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader??ref--8-oneOf-1-2!./node_modules/postcss-loader/src??ref--8-oneOf-1-3!./node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-4!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader??ref--8-oneOf-1-5!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/vue-loader/lib??vue-loader-options!./node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-scoped-loader!./src/pages/mine/index.vue?vue&type=style&index=0&id=4bd6864f&lang=scss&scoped=true& 4:14-814 14:3-18:5 15:22-822
 @ ./src/pages/mine/index.vue?vue&type=style&index=0&id=4bd6864f&lang=scss&scoped=true&
 @ ./src/pages/mine/index.vue
 @ ./src/pages.json
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://192.168.1.52:8081/sockjs-node (webpack)/hot/dev-server.js ./src/main.js

复现步骤

[复现问题的步骤]

  1. 启动 '...'
  2. 点击 '....'
  3. 查看

[或者可以直接贴源代码]

预期结果

[使用简洁清晰的语言描述你希望生效的预期结果]

实际结果

[这里请贴上你的报错截图或文字]

系统信息:

  • 发行平台: [如 微信小程序、H5平台、5+ App等]
  • 操作系统 [如 iOS 12.1.2、Android 7.0]
  • HBuilderX版本 [如使用HBuilderX，则需提供 HBuilderX 版本号]
  • uni-app版本 [如使用Vue-cli创建/运行项目，则提供npm run info的运行结果]
  • 设备信息 [如 iPhone8 Plus]
微信小程序
ubuntu
HBuilder X: 3.1.18
uni-app v3.2.2
uni-app cli v2.0.0-32220210818002

Environment Info:

  System:
    OS: Linux 5.11 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-8550U CPU @ 1.80GHz
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.10 - ~/.nvm/versions/node/v14.17.0/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
  Browsers:
    Chrome: 93.0.4577.82
    Firefox: 92.0
  npmPackages:
    @dcloudio/types: * => 2.5.6 
    @dcloudio/uni-app-plus: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/uni-app-plus-nvue:  0.0.1 
    @dcloudio/uni-app-plus-nvue-v8:  0.0.1 
    @dcloudio/uni-automator: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/uni-cli-shared: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/uni-h5: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/uni-helper-json: * => 1.0.13 
    @dcloudio/uni-i18n: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/uni-migration: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/uni-mp-360: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/uni-mp-alipay: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/uni-mp-baidu: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/uni-mp-kuaishou: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/uni-mp-qq: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/uni-mp-toutiao: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/uni-mp-vue: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/uni-mp-weixin: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/uni-quickapp-native: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/uni-quickapp-webview: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/uni-stat: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/uni-template-compiler: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/vue-cli-plugin-hbuilderx: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/vue-cli-plugin-uni: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/vue-cli-plugin-uni-optimize: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/webpack-uni-mp-loader: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @dcloudio/webpack-uni-nvue-loader:  0.0.1 
    @dcloudio/webpack-uni-pages-loader: ^2.0.0-32220210818002 => 2.0.0-32220210818002 
    @hap-toolkit/dsl-vue:  0.6.13 
    @vue/babel-helper-vue-jsx-merge-props:  1.2.1 
    @vue/babel-helper-vue-transform-on:  1.0.2 
    @vue/babel-plugin-jsx:  1.0.7 
    @vue/babel-plugin-transform-vue-jsx:  1.2.1 
    @vue/babel-preset-app:  4.5.13 
    @vue/babel-preset-jsx:  1.2.4 
    @vue/babel-sugar-composition-api-inject-h:  1.2.1 
    @vue/babel-sugar-composition-api-render-instance:  1.2.4 
    @vue/babel-sugar-functional-vue:  1.2.2 
    @vue/babel-sugar-inject-h:  1.2.2 
    @vue/babel-sugar-v-model:  1.2.3 
    @vue/babel-sugar-v-on:  1.2.3 
    @vue/cli-overlay:  4.5.13 
    @vue/cli-plugin-babel: ~4.5.0 => 4.5.13 
    @vue/cli-plugin-router:  4.5.13 
    @vue/cli-plugin-vuex:  4.5.13 
    @vue/cli-service: ~4.5.0 => 4.5.13 
    @vue/cli-shared-utils:  4.5.13 
    @vue/component-compiler-utils:  3.2.2 (3.2.2)
    @vue/devtools-api:  6.0.0-beta.15 
    @vue/preload-webpack-plugin:  1.1.2 
    @vue/shared: ^3.0.0 => 3.2.11 
    @vue/web-component-wrapper:  1.3.0 
    mpvue-page-factory:  1.0.1 
    mpvue-template-compiler:  1.0.13 
    uni-h5-vue:  2.6.10 
    uni-mp-vue:  2.6.10 
    vue: ^2.6.11 => 2.6.14 
    vue-hot-reload-api:  2.3.4 
    vue-loader:  15.9.8 (16.5.0, 15.9.8)
    vue-router:  3.0.1 
    vue-style-loader:  4.1.3 (4.1.3)
    vue-template-compiler: ^2.6.11 => 2.6.14 (2.6.14)
    vue-template-es2015-compiler:  1.9.1 
    vuex: ^3.2.0 => 3.6.2 (3.6.2)
  npmGlobalPackages:
    @vue/cli: 4.5.13

补充信息

[可选]
[根据你的分析，出现这个问题的原因可能在哪里？]

uni-app

7条答案

按热度按时间
uqdfh47h

uqdfh47h1#

sass-loader 版本高了

yarn add sass-loader@8 -D
赞(0）分享  回复(0）举报  2021-11-27
3phpmpom

3phpmpom2#

sass-loader 从v11开始不兼容wepack4，安装10.2.0试试

赞(0）分享  回复(0）举报  2021-11-27
tktrz96b

tktrz96b3#

我安装的有10.2.0也不行，我看上面有人说8，我试试

赞(0）分享  回复(0）举报  2021-11-27
o4tp2gmn

o4tp2gmn4#

npm i node-sass@4 sass-loader@7

赞(0）分享  回复(0）举报  2021-11-27
zed5wv10

zed5wv105#

是否还需要安装node-sass ,安装时版本是多少？

赞(0）分享  回复(0）举报  2021-11-27
ua4mk5z4

ua4mk5z46#

这个看你本地node版本是什么
node-sass 支持列表如下

NodeJSSupported node-sass versionNode Module
Node 166.0+93
Node 155.0+88
Node 144.14+83
Node 134.13+, <5.079
Node 124.12+72
Node 114.10+, <5.067
Node 104.9+, <6.064
Node 84.5.3+, <5.057
Node <8<5.0<57
赞(0）分享  回复(0）举报  2021-11-27
vlf7wbxs

vlf7wbxs7#

npm i sass-loader@10.1.1 -D 即可

赞(0）分享  回复(0）举报  2021-11-27
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com