web-dev-qa-db-fra.com

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

J'ai pu configurer avec succès un nouveau projet Vue en utilisant la version 3.0 de la CLI pour utiliser sass-resource-loader Il y a quelques semaines en utilisant les informations publiées ici: tilisation de sass -resources-loader avec vue-cli v3.x

Cependant, après avoir tout mis à jour aujourd'hui, je rencontre l'erreur suivante lors de l'exécution de npm run serve:

TypeError: Cannot read property 'scss' of undefined

les seules options qui semblent être passées dans .tap(options) sont:

{ compilerOptions: { preserveWhitespace: false } }

Je ne connais actuellement pas assez de chainWebpack pour déboguer efficacement, mais j'y travaille. Si quelqu'un a une idée de ce qui a changé pour provoquer cette erreur, ce serait grandement apprécié.

mon 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

Tu utilises [email protected], cela signifie probablement que votre projet utilise [email protected]Depuis la version 15 , le vue-loader n'a pas besoin de configurations supplémentaires pour les chargeurs. Vous pouvez configurer uniquement vos chargeurs Webpack principaux.

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

Vous pouvez également inspecter les configurations de webpack en utilisant le vue inspect ou ./node_modules/.bin/vue-cli-service inspect commandes.

8
Ruslan