KJ DEV
Tips

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

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

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

目次
  1. webpack4でVueをコンパイルする設定
  2. Vueのstyleをmini-css-extract-pluginでCSSファイルに出力する

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ファイルとして出力できるようになります。

開発で参考になった本

実際に読んでみて開発に役立った本を紹介しています。

これから本格的にデザインシステムを学んで作りたい時にとても参考になる一冊でした。デザインシステムついて幅広く触れられているけど、「tailwindを触ってデザインシステムに興味を持った」という人でも少しずつ取り入れやすいです。