uniapp install sass-loader error

dybxin commented 3 years ago

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

创建项目的方式：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

复现步骤 [复现问题的步骤]

启动 '...'
点击 '....'
查看

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

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

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

系统信息:

发行平台: [如微信小程序、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

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

yuconora commented 3 years ago

sass-loader 版本高了

yarn add sass-loader@8 -D

JesseChain commented 3 years ago

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

dybxin commented 3 years ago

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

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

zhetengbiji commented 3 years ago

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

dybxin commented 3 years ago

sass-loader 版本高了
yarn add sass-loader@8 -D  

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

yuconora commented 3 years ago

sass-loader 版本高了
yarn add sass-loader@8 -D  
是否还需要安装node-sass ,安装时版本是多少？

这个看你本地node版本是什么 node-sass 支持列表如下 NodeJS	Supported node-sass version	Node Module
Node 16	6.0+	93
Node 15	5.0+	88
Node 14	4.14+	83
Node 13	4.13+, <5.0	79
Node 12	4.12+	72
Node 11	4.10+, <5.0	67
Node 10	4.9+, <6.0	64
Node 8	4.5.3+, <5.0	57
Node <8	<5.0	<57

StrivingRabbit commented 3 years ago

npm i sass-loader@10.1.1 -D 即可

dcloudio / uni-app

uniapp install sass-loader error #2903