几周前,我使用3.0版本的CLI成功地将一个新的Vue项目配置为使用sass-resource-loader,使用的信息如下:Using sass-resources-loader with vue-cli v3.x

然而,在今天更新了所有内容之后,我在运行npm run serve时遇到了以下错误:

TypeError: Cannot read property 'scss' of undefined

似乎进入.tap(options)强的唯一选项是:

{ compilerOptions: { preserveWhitespace: false } }

我目前对chainWebpack个方面的知识还不足以进行有效的调试,但我正在努力.如果有人对导致这一错误的原因有任何见解,我们将不胜感激.

我的vue.config.js:

const path = require('path')

module.exports = {
  chainWebpack: (config) => {
    config
      .module
      .rule('vue')
      .use('vue-loader')
      .tap((options) => {
        console.log(options)
        options.loaders.scss = options.loaders.scss.concat({
          loader: 'sass-resources-loader',
          options: {
            resources: [
              path.resolve('./src/scss/_variables.scss'),
              path.resolve('./src/scss/_mixins.scss')
            ]
          },
        })
        return options
      })
    config
      .module
      .rule('scss')
      .use('sass-resources-loader')
      .loader('sass-resources-loader')
      .options({
        resources: [
          path.resolve('./src/scss/_variables.scss'),
          path.resolve('./src/scss/_mixins.scss')
        ]
      })
  }
}

推荐答案

你使用vue-cli@3.x,这可能意味着你的项目使用vue-loader@15.x

const path = require('path')

module.exports = {
  chainWebpack: (config) => {
    config
      .module
      .rule('scss')
      .use('sass-resources-loader')
      .loader('sass-resources-loader')
      .options({
        resources: [
          path.resolve('./src/scss/_variables.scss'),
          path.resolve('./src/scss/_mixins.scss')
        ]
      })
  }
}

您还可以使用vue inspect./node_modules/.bin/vue-cli-service inspect命令判断webpack配置.

Vue.js相关问答推荐

Vuetify/Vue3 插槽模板之间的阴影

写入计算值时出错,但我没有写入任何值

Vue Router中.getRoutes()获取的路由顺序优化建议

如何在 Nuxt3 中使用 nuxtjs/auth-next 模块?

Vue Js Composition Api 未定义(读取名称)

如何使用带有自定义标签和类的`transition-group`

Vuetify v-data-table ,如何在 HTML 中呈现标题文本?

Vue cli 3项目,图像路径中的动态src不起作用

如何将 axios/axios 拦截器全局附加到 Nuxt?

如何更新手动安装的 vue 组件上的props?

VueJS 禁用特定属性的react性

在渲染组件之前从 api 获取数据

v-for 中的 VueJS 插槽

vue-router的router-link实际刷新?

vue-test-utils:无法覆盖属性 $route,这通常是由于插件将该属性添加为只读值

如何在 Vue.js 应用程序中正确下载 Excel 文件?

简单的点击功能不触发

Vuejs - 使用 v-if 切换的保持活动组件

克隆元素并附加到 DOM 的正确方法

Vue Router beforeRouteLeave 不会停止子组件