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に次の１行を追加します。
“`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に次の１行を追加します。
“`js
const { environment } = require(‘@rails/webpacker’)
environment.loaders.get(‘sass’).use.push(‘import-glob-loader’) // １行追加
module.exports = environment
“`
これでglobパターンのインポートが有効になります。