概要

vue-loader v15でVue SFCからcssを読んだときと直接.cssファイルを読んだときに利用するloaderを使い分ける方法です

(cssはあくまで例としてで、scssやjsなどやり方はどれも同じです)

使い分けている例

webpackのoneOfというオプションを利用して使い分けることができます

以下の例を実際にwebpackのconfigで表現してみます

直接.cssファイルを読んだとき -> css-loader + postcss-loader
Vue SFCに記述したcssを読んだとき -> vue-style-loader + css-loader

rules: [
  {
    test: /\.css$/,
    oneOf: [
      {
        resourceQuery: /vue/,
        use: [
          'vue-style-loader',
          'css-loader',
        ]
      },
      {
        use: [
          'css-loader',
          'postcss-loader',
        ]
      },
    ]
  }
]

vue-loaderを通して読み込まれた場合resourceQueryにvueが付与されることを利用して判定することができます