web-dev-qa-db-ja.com

Vue CLI 3 sass-resources-loader-Options.loaders undefined

ここに投稿された情報を使用して、数週間前に_sass-resource-loader_を使用するために、3.0バージョンのCLIを使用して新しいVueプロジェクトを正常に構成できました： sing sass- vue-cli v3.xを使用したresources-loader

ただし、今日すべてを更新した後、_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')
        ]
      })
  }
}
_
javascriptwebpackvue.jsvue-cli
11
Andrew Boyd

_[email protected]_を使用します。これはおそらく、プロジェクトが_[email protected]_を使用していることを意味します バージョン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({
        resources: [
          path.resolve('./src/scss/_variables.scss'),
          path.resolve('./src/scss/_mixins.scss')
        ]
      })
  }
}
_

_vue inspect_または_./node_modules/.bin/vue-cli-service inspect_コマンドを使用して、webpackの設定を検査することもできます。

8
Ruslan