使用sass时vue.js Webpack模板的Webpack错误

编程问答 2022-08-14

问题描述

我是Vue.js和Webpack的新手，我不知道这是软件包问题还是我的错误

复制步骤：

  1. 从webpack模板创建新的vue项目
~ vue init webpack sass-test
? Project name sass-test
? Project description A Vue.js project
? Author dvec <[email protected]>
? 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
  1. 安装软件包（根据documentation）
~ npm install -D sass-loader sass
  1. 编辑src / components / HelloWorld.vue（根据documentation）
Old: <style scoped>
New: <style lang="scss" scoped>
  1. 运行
~ npm run dev
  1. 接收错误日志：
 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更改为更少（相同的再现步骤，不同的错误）
  3. 将规则添加到 webpack.conf （docs）
  4. 在 vue.config.js （docs）
    5. 中添加样式资源
  5. 将带有参数的.concat添加到 utils.js （docs）

我承认这可能是平台相关的错误。以上步骤已在macOS Catalina 10.15.6上进行了测试。如果无法重现此错误，请回复

解决方法

安装这个依赖

"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>
javascriptsassvue-clivue.jswebpackwebpackwebpack