Почему не получается получить доступ к переменной окружения?

поднял проект коммандой vue init webpack project-name
разобрался как добавить pug и stylus
хочу настроить переменные окружения: использовал плагин, создал файл .env, добавил переменную API_SECRET_KEY=efb9erfdf6fd9vfd98vd8ssv(значение переменной вымышленно для примера) и отправил .env в .gitignore

подкорректировал /config/index.js
внизу то, что я добавил к шаблонной конфигурации

const path = require('path')
const Dotenv = require('dotenv-webpack')

module.exports = {
...
...
...
  module: {
    rules: [
      {
        test: /.vue$/,
        loader: 'vue-loader',
        options: {
          loaders: {
            css: 'stylus-loader'
          }
        }
      }
    ]
  },
  plugins: [
    new Dotenv({ path: path.join(process.cwd(), '.env') })
  ]
}

в App.vueпытаюсь вывести в консоль переменную process.env.API_SECRET_KEY, но выдаёт undefined

В чём проблема? Всё сделал по инструкции. Как вы достаёте переменные из .env в коде компонента?