Yak shaving logs


My life is just yak shaving.

[webpacker][Vue.js] `*.vue` でsass,scssを使用する

2017/08/23 #rails #gem #vue.js

By Yusuke Takita


こんにちは。Takitaです。

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

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

https://github.com/tackeyy/blog/pull/51/commits/5a1b0a7e6d95d1fd6d670b025630cfb6dfa810d7

  • Gemfile
-gem 'webpacker', '~> 2.0'
+gem 'webpacker', git: 'https://github.com/rails/webpacker.git'
  • config/webpack/loaders/vue.js

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

https://github.com/rails/webpacker/blob/master/lib/install/config/loaders/installers/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を使うことにしました。

参考

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

このエントリーをはてなブックマークに追加

categories


最新記事


tags