Tips
webpack4でVueとSCSSをコンパイルする方法が変更になった
webpack4ではVueをコンパイルするための設定が少し変わりました。
Vueと合わせてSCSSを使用するための設定を書きます。
webpack4でVueをコンパイルする設定
Webpakck4になってVueとSCSSをコンパイルするための設定が、moduleとpluginsの部分が変更になりました。
- VueはVueLoaderPluginをpluginsで読み込む
- SCSSはrulesに設定する
実際の設定は下記です。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
const { VueLoaderPlugin } = require('vue-loader'); { module: { rules: [ { test: /\.vue?$/, loader: 'vue-loader' }, { test: /\.scss$/, use: [ 'vue-style-loader', 'css-loader', { loader: 'sass-loader', }, ], } ] }, plugins: [ new VueLoaderPlugin() ] }
webpack4になりVueのコンパイルにはVueLoaderPluginをpluginsで使います。
またVue内のSCSSはvue-loaderのoptionsで指定するのではなくrulesに単体で設定するようになりました。
Vueのstyleをmini-css-extract-pluginでCSSファイルに出力する
vueファイル内のstyleをcssファイルにまとめるには、mini-css-extract-pluginを使います。
webpack3系までは同様のことをする場合はextract-text-webpack-pluginを使っていましたが、webpack4系になってから変更になりました。
設定は上記から一部変更することで対応できます。
まずはmini-css-extract-pluginを読み込みます。
1
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
その後vue-style-loaderを先頭で読みこんでいた箇所を「MiniCssExtractPlugin.loader」に変更します。
1 2 3 4 5 6 7 8 9 10
{ test: /\.scss$/, use: [ MiniCssExtractPlugin.loader 'css-loader', { loader: 'sass-loader', }, ] }
pluginsにも下記のようにMiniCssExtractPluginに出力する名前(場所)をfilenameに指定して追加します。
1 2 3 4 5 6
plugins: [ new VueLoaderPlugin() new MiniCssExtractPlugin({ filename: 'styles/[name].css' }) ]
これでVueのstyleをcssファイルとして出力できるようになります。