Vue CLI 3 sass-resources-loader - Options.loaders не определено - PullRequest
Новая
       13

Vue CLI 3 sass-resources-loader - Options.loaders не определено

0 голосов
/ 23 мая 2018

Мне удалось успешно настроить новый проект Vue с использованием версии CLI 3.0 для использования sass-resource-loader несколько недель назад с использованием информации, размещенной здесь: Использование sass-resources-loader с vue-cli v3.x

Однако после обновления всего сегодня я сталкиваюсь со следующей ошибкой при запуске npm run serve:

TypeError: Cannot read property 'scss' of undefined

единственные опции, которые кажутсябыть переданным в .tap(options) являются:

{ compilerOptions: { preserveWhitespace: false } }

В настоящее время я недостаточно знаю о chainWebpack, чтобы эффективно отлаживать, но я работаю над этим.Если у кого-то есть понимание того, что изменилось, чтобы вызвать эту ошибку, это будет с благодарностью.

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

1 Ответ

0 голосов
/ 02 июня 2018

Вы используете vue-cli@3.x, это, вероятно, означает, что ваш проект использует vue-loader@15.x Начиная с версии 15 , vue-loader не требует дополнительных настроек для загрузчиков.Вы можете настроить только ваши основные загрузчики веб-пакетов. 

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.

...