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

Posted 2023-02-23

【中文标题】使用 sass 时 vue.js webpack 模板的 Webpack 错误

【英文标题】：Webpack error for vue.js webpack template when using sass

【发布时间】：2020-12-15 19:55:27

【问题描述】：

我是 Vue.js 和 webpack 的新手，我不知道是包的问题还是我的错误

重现步骤：

从 webpack 模板创建新的 vue 项目

~ vue init webpack sass-test
? Project name sass-test
? Project description A Vue.js project
? Author dvec <[e-mail]>
? 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

安装包（根据documentation）

~ npm install -D sass-loader sass

编辑src/components/HelloWorld.vue（根据documentation）

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

运行

~ npm run dev

接收错误日志：

 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

我尝试过的：

重新安装 vue-cli 将 sass 更改为 less（重现步骤相同，错误不同） 将规则添加到 webpack.conf (docs) 在 vue.config.js 中添加样式资源 (docs) 将带有参数的.concat 添加到utils.js (docs)

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

【问题讨论】：

如果你是 Vue（和 Webpack）的新手，我强烈建议你使用 CLI 的第 4 版 ~ cli.vuejs.org。事实上，您似乎使用的是最新指南，但 vue init webpack sass-test 绝对是 v2。您需要卸载 vue-cli 并安装 @vue/cli

如果您遵循安装vue-cli 的指南，请查找更新的指南。官方文档可能是最好的起点

@Phil 好的，谢谢你的帮助

【参考方案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>