preact-cliでCSS Modulesを任意フォルダで使用する
preact-cli は webpack をラッピングしています。
preact.config.js を作成する事によりカスタマイズが可能です。
https://github.com/developit/preact-cli/wiki/Config-Recipes
また preact-cli のCSS規則で components と routes 以下のファイルは <div class={style.header}>hoge</div>
のような記法が使用できるCSS Modulesで
それ以外は import 'sanitize.css'
のようにCSSが読み込めるようになっています。
詳しくはコードをご確認ください。
https://github.com/developit/preact-cli/blob/1e54b822b561206ce8ea1121f4ac1877cf4e23f3/src/lib/webpack/webpack-base-config.js
そこで components と routes 以外のフォルダでもCSS Modulesで読み込まれるように試してみました。
export default function(config, env, helpers) { const staticLoads = [ source('sanitize.css'), source('style/index.css') ]; const loaderA = config.module.loaders[4]; const loaderB = config.module.loaders[5]; delete(config.module.loaders[4].include); delete(config.module.loaders[5].exclude); config.module.loaders[4].exclude = staticLoads; config.module.loaders[5].include = staticLoads; }
このように webpack の設定を上書きする事で components と routes 以外でもCSS Modulesが使えるようになります。