【Rails】WebpackerでSassのglobパターンの一括importを有効にする

【Rails】WebpackerでSassのglobパターンの一括importを有効にする

RailsのWebpackerでは、Sassのimport時にアスタリスクを並べる形式の一括インポートに対応していません。

“`scss
@import ‘structure/**’; // コンパイルエラーになる
“`

Webpackerでもnpmライブラリと少しのコードの追加で実現することで一括インポートに対応できます。

import-glob-loaderの追加

sassでglobパターンが使えるようにするために、はじめに `import-glob-loader` をインストールします。

“`sh
$ yarn add import-glob-loader
“`

もしyarnを使っていなければ、

“`sh
$ npm install import-glob-loader –save
“`

でインストールしましょう。

Railsのconfigに設定を追加

Webpack 2系の場合

config/webpack/loaders/sass.jsに次の1行を追加します。

“`js
const ExtractTextPlugin = require(‘extract-text-webpack-plugin’)
const { env } = require(‘../configuration.js’)

module.exports = {
test: /\.(scss|sass|css)$/i,
use: ExtractTextPlugin.extract({
fallback: ‘style-loader’,
use: [
{ loader: ‘css-loader’, options: { minimize: env.NODE_ENV === ‘production’ } },
{ loader: ‘postcss-loader’, options: { sourceMap: true } },
‘resolve-url-loader’,
{ loader: ‘sass-loader’, options: { sourceMap: true } },
‘import-glob-loader’, // 1行追加
]
})
}
“`

Webpack 3系の場合

config/webpack/environment.jsに次の1行を追加します。

“`js
const { environment } = require(‘@rails/webpacker’)

environment.loaders.get(‘sass’).use.push(‘import-glob-loader’) // 1行追加

module.exports = environment

“`

これでglobパターンのインポートが有効になります。

五十川 洋平(Yohei Isokawa)

五十川 洋平(Yohei Isokawa)

フロントエンドエンジニア/面白法人カヤックなどのWeb制作会社に勤務したのち、故郷の新潟に戻り独立。JSフレームワークAngularやFirebase、Google Cloud Platformを使ったWebアプリ開発が得意。 また、Udemyのプログラミング解説の講師、writer.appの自主開発や上越TechMeetupの主催などを行っています。

プロフィール

©Copyright 2022 Yohei Isokawa All Rights Reserved.