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

Question

Я пытаюсь перенести проект. Я начал использовать bourgeon template до Quasar framework.

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

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

---

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

В WebPack 2 для Quasar, файлы являются следующие.

---

CSS-utils.js

Link

В принципе, выход грузчики конфигурации для 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

Link

Код часть интереса:

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 WebPack грамматики) в CSS-utils.js или webpack.config.base .js сделать доступными для обоих VUE файлов и Styl/стилус файлов, Джит и разрывной librairies и тому index.styl лист.

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

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

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, следующий peice кода решить мои проблемы. Большое спасибо.

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