rails5 + webpacker4 + vue-loader15.7.0 で単一VueコンポーネントにSCSSを書く

参考にさせていただいたページ

• GitHub - rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails

はじめに

webpackerよくわからなくてハマったときのメモです。

config/webpack/loaders/vue.js

webpackであれば、webpack.config.jsのrulesに書くことを、webpackerではファイルごとに分けてからrequireする例がよく出てきます。

config/webpack/loaders/vue.jsに以下のように記述します。

module.exports = {
  test: /\.vue(\.erb)?$/,
  use: [{
    loader: 'vue-loader'
  }]
}

今回、特にmini-css-extract-pluginなどは設定していません。

config/webpack/loaders/sass.jsはいらない

なんかWebで検索すると、以下のようなファイルを作成するような情報が出てきたりしますが、どうもいらないみたいでした。

• config/webpack/loaders/sass.js
• config/webpack/loaders/scss.js

config/webpack/*.js

webpackerだと、以下のような感じでwebpack.config.jsにあたるファイルがあると思います。

• config/webpack/environment.js
• config/webpack/development.js
• config/webpack/production.js
• config/webpack/test.js

例えばconfig/webpack/environment.jsに、さきほどのconfig/webpack/loaders/vue.jsを以下の感じでrequireして使います。

const { environment } = require('@rails/webpacker')
const { VueLoaderPlugin } = require('vue-loader')
const vue = require('./loaders/vue')

environment.plugins.prepend('VueLoaderPlugin', new VueLoaderPlugin())

environment.loaders.prepend('vue', vue)

environment.jsの記述内容については色々省略してvue-loaderに関係あるところだけ書いています。

html.erb

layoutsの方ではなく、各ページごとのerbに以下のような感じで書きます。

単一Vueコンポーネントファイルの<template>と<script>だけが必要な場合はjavascript_pack_tagだけで良いのですが、どうやら<style>も必要な場合はstylesheet_pack_tagの方も書く必要があるようです。
このpathはどちらも同じだと思います。

<% content_for :javascript do %>
  <%= stylesheet_pack_tag "path/to/your/js/entry/point" %>
  <%= javascript_pack_tag "path/to/your/js/entry/point" %>
<% end %>

.vueファイル

.vueファイルは例えばこんな感じで書きます。 <%= stylesheet_pack_tag "path/to/your/js/entry/point" %>を書いて、<style></style>のタグを書いておかないとエラーになりますので注意が必要です。

<template>
  <div class="hoge">hoge</div>
</template>

<script>
〜略〜
</script>

<style lang="scss" scoped>
.hoge {
  background: #ff0000;
  font-size: 100px;
  font-weight: bold;
}
</style>

書き出されるHTML

上記したerbがHTMLとして書き出されると、scriptタグとlinkタグはたぶん以下のような感じになると思います。

<script src="/packs/js/path/to/your/js/entry/point-41708a9247d43d8ca518.js"></script>
<link rel="stylesheet" media="screen" href="/packs/css/path/to/your/js/entry/point-36141da8.css">

scssを@importする場合のpath

<style lang="scss" scoped>
@import './app/frontend/path/to/your/file';
</style>

とか

<style lang="scss" scoped>
@import './app/frontend/path/to/your/file.scss';
</style>

みたいな感じでimportできました。