Загрузите библиотеку стилуса и глобальный лист с помощью vue-loader и webpack2

Question

Я пытаюсь перенести проект, который я начал использовать шаблон буржуона, в среду Quasar.

В процессе, я должен обновить с Webpack 1 до 2. Все в порядке, кроме следующего:

Я использую стилус с некоторыми библиотеками (Rupture и Jeet) и таблицей стилей, где я храню некоторые переменные, которые должны быть доступны глобально и для любого файла VUE. Я видел другую тему, где лист стилуса вручную импортируется во все файлы Vue, которые требуют его. Но для этого я предпочел бы иметь глобальный доступ автоматически по шаблону буржуазии.

---

Примечание. В следующем коде я удалил non-necessary code от ...

В веб-пакете 2 для Quasar файлы выглядят следующим образом.

---

CSS-utils.js

Ссылка на сайт

По сути, он выводит конфигурацию загрузчиков для загрузчиков vue-загрузчика или загрузчиков обычного стиля в следующей форме (обратите внимание, что я удалил ссылку на SASS, поскольку она здесь неактуальна):

{ 
  css: 'vue-style-loader!css-loader',
  styl: 'vue-style-loader!css-loader!stylus-loader,
  stylus: 'vue-style-loader!css-loader!stylus-loader
}

---

webpack.base.conf.js

Ссылка на сайт

Интересующая часть кода:

module: {
  rules: [
    ...
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
        postcss: cssUtils.postcss,
        loaders: merge({js: 'babel-loader'}, cssUtils.styleLoaders({
          sourceMap: useCssSourceMap,
          extract: env.prod
        }))
      }
    }
    ...
  ]
}

---

Конфигурация Webpack v1 Я хочу портировать на v2

module.exports = {
  ...
  stylus: {
    use: [
      require('jeet')(),
      require('rupture')(),
    ],
    import: [
      path.resolve(__dirname, '../src/styles/index.styl')
    ]
  }
}

---

Моя проблема с Webpack v2

Я не могу найти способ добавить часть кода (из веб-пакета 1 грамматика) в css-utils.js или webpack.config.base.js, чтобы сделать доступными как файлы vue, так и файлы стилей / стилусов в Jeet Библиотеки Разрыва и лист index.styl.

Я просмотрел документацию как vue-loader, так и stylus-loader, но не могу заставить его работать.

Добавление следующего кода в webpack.config.base.js не работает, и я понятия не имею, что мне делать. Узел выведет мне сообщение об ошибке, в котором четко указано, что ни Jeet/Rupture не импортируются ни index.styl так как он не может восстановить некоторые переменные, которые я определил в index.styl или синтаксис, как +above('tablet') от разрыва.

module.exports = {
  ...
  rules: [
   ...      
  ],
  plugins: [
   ...
  new webpack.LoaderOptionsPlugin({
    minimize: env.prod,
    options: {
      context: path.resolve(__dirname, '../src'),
      ...
      stylus: {
       default: {
         use: [
          require('jeet')(),
          require('rupture')()
         ],
         import: [
           path.resolve(__dirname, '../src/styles/index.styl')
         ]
       }
      }
     }
   })
  ]
}

---

Любая помощь будет принята с благодарностью, спасибо:)

Answer 1

Как указал @Razvan Stoenescu, следующий фрагмент кода решил мои проблемы. Большое спасибо.

module.exports = {
  ...
  rules: [
   ...      
  ],
  plugins: [
   ...
   new webpack.LoaderOptionsPlugin({
     minimize: env.prod,
    options: {
     context: path.resolve(__dirname, '../src'),
     ...
     stylus: {
        use: [
         require('jeet')(),
         require('rupture')()
        ],
        import: [
         path.resolve(__dirname, '../src/styles/index.styl')
        ]
      }
    }
  })
 ]
}