使用 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>