使用 sass 時 vue.js webpack 模板的 Webpack 錯誤

Question

我是 Vue.js 和 webpack 的新手，我不知道是包的問題還是我的錯誤

重現步驟：

1. 從 webpack 模板創建新的 vue 項目

~ vue init webpack sass-test
? Project name sass-test
? Project description A Vue.js project
? Author dvec <dvecend@gmail.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
~ cd sass-test

2. 安裝包（根據文檔）

~ npm install -D sass-loader sass

3. 編輯 src/components/HelloWorld.vue（根據文檔）

Old: <style scoped>
New: <style lang="scss" scoped>

4. 跑

~ npm run dev

5. 接收錯誤日志：

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                               03:45:32

 error  in ./src/components/HelloWorld.vue

Module build failed: TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received undefined
    at validateString (internal/validators.js:121:11)
    at Object.join (path.js:1039:7)
    at getSassOptions (/private/tmp/sass-test/node_modules/sass-loader/dist/utils.js:160:37)
    at Object.loader (/private/tmp/sass-test/node_modules/sass-loader/dist/index.js:36:49)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/lib/style-compiler?{"vue":true,"id":"data-v-469af010","scoped":true,"hasInlineConfig":false}!./node_modules/sass-loader/dist/cjs.js?{"sourceMap":true}!./node_modules/vue-loader/lib/selector.js?type=styles&index=0!./src/components/HelloWorld.vue 4:14-375 13:3-17:5 14:22-383
 @ ./src/components/HelloWorld.vue
 @ ./src/router/index.js
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

我試過的：

1. 重新安裝 vue-cli
2. 將 sass 更改為 less（重現步驟相同，錯誤不同）
3. 將規則添加到webpack.conf ( docs )
4. 在vue.config.js ( docs ) 中添加樣式資源
5. 將帶有參數的.concat添加到utils.js ( docs )

我承認這可能是一個平台相關的錯誤。 上述步驟已在 macOS Catalina 10.15.6 上測試。 如果您無法重現此錯誤，請回復

Answer 1

安裝這個依賴

"dependencies": {
    "core-js": "^3.6.5",
    "nuxt": "^2.14.6",
    "nuxt-buefy": "^0.4.3"
  },
  "devDependencies": {
    "node-sass": "^5.0.0",
    "pug": "^3.0.0",
    "pug-plain-loader": "^1.1.0",
    "sass-loader": "^10.1.0"
  }

而你 index.vue

<template lang="pug">
  section.hero.is-fullheight
    .hero-body
      .column.is-12-desktop.is-12-mobile
        .columns.is-multiline.is-mobile.is-centered.is-vcentered
          p.celular Hola
</template>

<script>
export default {
  name: 'Inicio',
}
</script>

<style lang="sass" scoped>
.celular
  background: black
</style>