Electron アプリケーションで SCSS を CSS に変換したものを使いたいと思っています。
とくに React 等を使うつもりはないので、いわゆる CSS in JS のような形にせず、単に CSS のまま使う予定です。
Electron のビルドに webpack を使うのでインストール済みなのですが、SCSS の変換を webpack でやるべきなのか gulp を使うほうがいいのか迷っています。
webpack で sass-loader, mini-css-extract-plugin などを使えば変換できることを確かめたのですが、現時点ではとくに意味がなさそうな JS ファイル(当環境では style.bundle.js という名称)が一緒に作られるので遠回りなようにも見えてしまいます。(原理がよくわかっていません)
以下は使用した webpack.config.js です。
Javascript
1const path = require('path') 2const MiniCssExtractPlugin = require("mini-css-extract-plugin"); 3 4module.exports = [{ 5 mode: 'development', 6 entry: { 7 style: './src/assets/sass/app.scss' 8 }, 9 devtool: "source-map", 10 output: { 11 path: path.join(__dirname, 'dist'), 12 filename: 'assets/js/[name].bundle.js' 13 }, 14 module: { 15 rules: [{ 16 test: /.css$/, 17 use: [ 18 MiniCssExtractPlugin.loader, 19 'css-loader', 20 ] 21 }, 22 { 23 test: /.scss$/, 24 use: [ 25 MiniCssExtractPlugin.loader, 26 { 27 loader: 'css-loader', 28 options: { 29 importLoaders: 1, 30 }, 31 }, 32 'sass-loader', 33 ] 34 } 35 ] 36 }, 37 plugins: [ 38 new MiniCssExtractPlugin({ 39 filename: "assets/css/[name].css" 40 }) 41 ] 42}];
タスクランナーとしての役目は gulp で行ってしまえば余計なファイルが作られる問題はなさそうですが、工夫すれば webpack だけでもやれそうな気がします。このあたりの話題に関しては知識不足なのでこのような処理を行う際どうするのが一般的なのか知りたいです。
よろしくお願いいたします。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/06/06 03:39