Typescript
React
SCSS
のアーキテクチャで検証をしているところで、React
のcss modules
でSCSS
を利用しようとしています。
css modules
の利用になるので、SCSS
はコンポーネントごとに独立しているわけですが、このとき共通化されたSCSS
を各コンポーネントのSCSS
にインポートしようと試みました。
具体的には、下記のwebpack.config.js
の構成になりますが、ここで行なっていることはsass-loader
のoptions
を利用して、'@import "./resources/style/global.scss";'を各コンポーネントのSCSS
に追記してコンパイルできるものです。
javascript
1{ 2 include: SOURCE_DIRECTORY, 3 test: /.scss$/, 4 use: [ 5 MiniCssExtractPlugin.loader, 6 { 7 loader: 'css-loader', 8 options: { 9 modules: true, 10 minimize: !__DEV__, 11 sourceMap: __DEV__, 12 localIdentName: __DEV__ ? '[local]--[hash:base64:5]' : null, 13 url: false, 14 importLoaders: 2 15 } 16 }, 17 { 18 loader: 'postcss-loader', 19 options: { 20 sourceMap: __DEV__ 21 } 22 }, 23 { 24 loader: 'sass-loader', 25 options: { 26 data: '@import "./resources/style/global.scss";', 27 sourceMap: __DEV__ 28 } 29 } 30 ] 31},
これにより全てのSCSS
には共通化したSCSS
が取り込まれるのですが、ここでひとつ問題が起こりました。
すべてのSCSS
をindex.css
にひとまとまりにしてコンパイルするMiniCssExtractPlugin
を利用したのですが、出来上がったindex.css
を確認すると下記のように、共通化されたSCSS
の記述が何度も繰り返されております。
おそらくはコンポーネントのSCSS
の数だけ@import
が繰り返され、このようにビルドされてしまっているのですが、この重複を行わずscss-loader
のoptions
で設定することはできないでしょうか?
css
1# 繰り返し確認されるcssの記述部分 2@charset "UTF-8"; 3html { 4 ... 5} 6 7body { 8 ... 9} 10 11*, *:before, *:after { 12 ... 13} 14 15.icon--3G5Cs { 16 display: block; 17} 18 19.icon--3G5Cs:after { 20 content: ""; 21 display: block; 22 background-size: contain; 23 vertical-align: middle; 24} 25 26# 繰り返し確認されるcssの記述部分 27@charset "UTF-8"; 28html { 29 ... 30} 31 32body { 33 ... 34} 35 36*, *:before, *:after { 37 ... 38} 39 40.align-center--39fKe { 41 display: flex; 42 justify-content: center; 43 align-items: center; 44} 45 46.vertical-center--1TsEU { 47 display: flex; 48 align-items: center; 49} 50... 51
あなたの回答
tips
プレビュー