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

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

スポンサーリンク

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

@import 'structure/**'; // コンパイルエラーになる

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

import-glob-loaderの追加

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

$ yarn add import-glob-loader

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

$ npm install import-glob-loader --save

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

Railsのconfigに設定を追加

Webpack 2系の場合

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

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行を追加します。

const { environment } = require('@rails/webpacker')

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

module.exports = environment

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

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