[Vue.js] 最新バージョンのwebpackerだと`*.vue` でsass,scssが使用できない

最近webpackerをはじめました。*.vueの中で<style lang="sass">（もしくはscss）にすればsassを使えるかなと思っていたのですが、2017/08/23 時点ではmasterからソースをとってこないとsassが使えませんでした。（最新バージョンのwebpackerだとダメ）

webpackerのissue/prを漁って対応したところ、以下のコミットのように2箇所を修正すれば <style lang="sass"> でsassもしくはscssが利用できるようになりました。

• Gemfile

-gem 'webpacker', '~> 2.0'
+gem 'webpacker', git: 'https://github.com/rails/webpacker.git'

• config/webpack/loaders/vue.js

下のファイルで上書きましょう。

+const { env, settings } = require('../configuration.js')
+
+const isProduction = env.NODE_ENV === 'production'
+const extractCSS = !(settings.dev_server && settings.dev_server.hmr)
+
module.exports = {
-  test: /.vue$/,
+  test: /\.vue$/,
   loader: 'vue-loader',
   options: {
-    extractCSS: true,
-    loaders: {
-      js: 'babel-loader',
-      file: 'file-loader',
-      scss: 'vue-style-loader!css-loader!postcss-loader!sass-loader',
-      sass: 'vue-style-loader!css-loader!postcss-loader!sass-loader?indentedSyntax'
-    }
+    extractCSS: isProduction || extractCSS
  }
}

config/webpack/loaders/vue.js を上書きするだけで良いのかな？と思っい、 ./bin/rails webpacker:install:vue をやり直してみたのですが、結局 config/webpack/loaders/vue.js が上書きされるだけだったので、config/webpack/loaders/vue.jsconfig/webpack/loaders/vue.js だけ最新にすれば問題ありません。

$ ./bin/rails webpacker:install:vue 
warning: parser/current is loading parser/ruby24, which recognizes
warning: 2.4.0-compliant syntax, but you are running 2.4.1.
warning: please see https://github.com/whitequark/parser#compatibility-with-ruby-mri.
Webpacker is installed 🎉 🍰
Using /Users/tackeyy/dev/blog/config/webpacker.yml file for setting up webpack paths
warning: parser/current is loading parser/ruby24, which recognizes
warning: 2.4.0-compliant syntax, but you are running 2.4.1.
warning: please see https://github.com/whitequark/parser#compatibility-with-ruby-mri.
Copying vue loader to config/webpack/loaders
    conflict  config/webpack/loaders/vue.js
Overwrite /Users/tackeyy/dev/blog/config/webpack/loaders/vue.js? (enter "h" for help) [Ynaqdh] y
       force  config/webpack/loaders/vue.js
Copying the example entry file to /Users/tackeyy/dev/blog/app/javascript/packs
      create  app/javascript/packs/hello_vue.js
Copying vue app file to /Users/tackeyy/dev/blog/app/javascript/packs
      create  app/javascript/packs/app.vue
Installing all vue dependencies
         run  yarn add vue vue-loader vue-template-compiler from "."
yarn add v0.24.6

その他

stylusにしようかなと思ったのですが、railsの一部でvueを使っており、railsではsassを使っているので、vueでもsassを使うことにしました。

この記事は以下のブログにも記載しています。
http://tackeyy.com/blog/posts/how-to-use-sass-or-scss-in-vue-files

参考

https://github.com/rails/webpacker/issues/340
https://github.com/rails/webpacker/pull/346