webpack4でVueとSCSSをコンパイルする方法が変更になった

vue

webpack4ではVueをコンパイルするための設定が少し変わりました。

Vueと合わせてSCSSを使用するための設定を書きます。

webpack4でVueをコンパイルする設定

Webpakck4になってVueとSCSSをコンパイルするための設定が、moduleとpluginsの部分が変更になりました。

  • VueはVueLoaderPluginをpluginsで読み込む
  • SCSSはrulesに設定する

実際の設定は下記です。

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を読み込みます。

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

その後vue-style-loaderを先頭で読みこんでいた箇所を「MiniCssExtractPlugin.loader」に変更します。

{
test: /\.scss$/,
use: [
MiniCssExtractPlugin.loader
'css-loader',
{
loader: 'sass-loader',
},
]
}

pluginsにも下記のようにMiniCssExtractPluginに出力する名前(場所)をfilenameに指定して追加します。

plugins: [
new VueLoaderPlugin()
new MiniCssExtractPlugin({
filename: 'styles/[name].css'
})
]

これでVueのstyleをcssファイルとして出力できるようになります。

vueファイル内で共通のSCSS(SASS)を使う方法を「Vueで共通のSCSS(SASS)をwebpack(3系と4系)で読み込む方法」に書きました。

WEB開発の依頼について

フリーのフロントエンドエンジニアとして企業様のWEB開発をさせていただいています。

Vue.jsやReact.jsを使ったアプリケーションの作成などのご要望がありましたら、お気軽にお問い合わせください。

実績や単価については「WEB開発について」をご覧ください。

運営について

MK Devはフリーランスのエンジニア村上浩司が運営するメディアです。フロントエンドを中心としたWEB開発、PCやガジェットに関連したことを発信しています。

最新の情報を受取る

(c) MK Dev. All Rights Reserved.