Vue CLI 3 sass-resources-loader - Options.loaders undefined [英] Vue CLI 3 sass-resources-loader - Options.loaders undefined

问题描述

几个星期前，我使用3.0版本的CLI成功配置了一个新的Vue项目，使用 sass-resource-loader ，使用此处发布的信息： 在vue-cli中使用sass-resources-loader v3.x

然而，在今天更新所有内容后，我在运行 npm run serve ：

TypeError：无法读取未定义的属性'scss'

似乎传入 .tap（期权）的唯一选项是：

{compilerOptions：{preserveWhitespace：false}}

我目前对<$ c目前还不够了解$ c> 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：{ 
资源：[
 path.resolve（'。/ src / scss / _variables.scss'），
 path.resolve（'。/ src / scss / _mixins.scss'）
 $ 
}，
}）
返回选项
}）
 config 
 .module 
 .rule（'scss'）
 .use（'sass-resources-loader'）
 .loader（'sass-resources-loader'）
 .options（{
资源：[
路径。 resolve（'。/ src / scss / _variables.scss'），
 path.resolve（'。/ src / scss / _mixins.scss'）
] 
}）
 } 
} 
  

解决方案

您使用 vue-cli@3.x ，这可能意味着您的项目使用 vue-loader@15.x
自15版以来， vue-loader 不需要额外的加载器配置。
您只能配置主要的webpack加载器。

  const path = require（'path'）
 
 module.exports = {
 chainWebpack：（config）=> {
 config 
 .module 
 .rule（'scss'）
 .use（'sass-resources-loader'）
 .loader（'sass-resources- loader'）
 .options（{
资源：[
 path.resolve（'。/ src / scss / _variables.scss'），
 path.resolve（'./ src / scss / _mixins.scss'）
] 
}）
} 
} 
  

您还可以使用 vue inspect 或 ./ node_modules /来检查webpack配置.bin / vue-cli-service inspect 命令。

I was able to successfully configure a new Vue project using the 3.0 version of the CLI to use sass-resource-loader a few weeks ago using the information posted here: Using sass-resources-loader with vue-cli v3.x

However, after updating everything today I'm encountering the following error when running npm run serve:

TypeError: Cannot read property 'scss' of undefined

the only options that seem to be getting passed into .tap(options) are:

{ compilerOptions: { preserveWhitespace: false } }

I don't currently know enough about chainWebpack to effectively debug, but I'm working on it. If anyone has any insights into what's changed to cause this error, it'd be greatly appreciated.

my 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')
        ]
      })
  }
}

解决方案

You use vue-cli@3.x, this probably means that your project uses vue-loader@15.x Since version 15, the vue-loader does not need additional configs for loaders. You can configure only your main webpack loaders.

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')
        ]
      })
  }
}

You can also inspect webpack configs using the vue inspect or ./node_modules/.bin/vue-cli-service inspect commands.

这篇关于Vue CLI 3 sass-resources-loader - Options.loaders undefined的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！