gulp×vueでvueコンポーネント内に共通のscssを読み込む方法

Question

お世話になります。

gulpとvueを使用して制作をしているのですが、
vueコンポーネントファイル内に

<style lang="scss">
  @import "example/path/common.scss";
  .bg{
    @include sample-mixin;
  }
</style>
 

などのように読み込んでいる、
共通の変数やmixinの書かれているscssファイルを、
各vueファイルではなく、gulpの設定ファイルなどで全vueファイルにまとめてインクルードする方法はありますでしょうか？

外部のサイトになりますが、

webpackだったら
こちらのページ
の[vue-loaderで設定]の項

Nuxt.jsだったら
こちらのページ
の中段でstyle-resourcesに記述している部分

のようなことを、
gulpでやる方法を探しています。
何かご存じの方いましたら、ご教授お願いします。

Answer 1

gulpでwebpackを使ってみてはいかがでしょうか。

$yarn add -D gulp webpack webpack-stream

import gulp from 'gulp'
import { log, colors } from 'gulp-util'
import named from 'vinyl-named'
import webpack from 'webpack'
import gulpWebpack from 'webpack-stream'

const webpackConfig = {
  // ...,
  module: {
    // sass-loaderの設定
  },
  // ...
}

gulp.task('pack', cb => {
  return gulp
    .src(/* target files */)
    .pipe(plumber({ errorHandler: () => log(colors.red('Cannot load target files')) }))
    .pipe(named())
    .pipe(
      gulpWebpack(webpackConfig, webpack, (err, stats) => {
        if (err) return
      })
    )
    .pipe(gulp.dest('path/to/build'))
})

Comments

[mitsuru_cbc]

ご回答ありがとうございます！
このためだけにwebpack使うのはな・・・と思って手段を探していたのですが、
確かに悩んでるよりは使っちゃった方が早いですね。