Vue+Webpackで開発する前にCSS周りで設定しておきたいこと

概要

• WebpackでVueをバンドルする際にcss周りで設定しておきたいものをまとめた。

Vue.jsの単一ファイルコンポーネントのCSSをひとつのファイルにまとめてminifyする

Vueの単一ファイルコンポーネントに記述したcssを別ファイルで出力できるように設定します。
Webpackのリファレンスを参考に導入した。

使うモジュール

• mini-css-extract-plugin
• optimize-css-assets-webpack-plugin

モジュールをインストールする

$ npm install --save-dev mini-css-extract-plugin optimize-css-assets-webpack-plugin

実装

const path = require("path"),
  webpack = require("webpack"),
  MiniCssExtractPlugin = require("mini-css-extract-plugin"),
  OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")

module.exports = (env, argv) => {
  return {
    ...
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: "css-loader",
              options: {
                url: false,
                minimize: true,
                sourceMap: true
              }
            },
            {
              loader: "sass-loader",
              options: {
                sourceMap: true
              }
            },
          ]
        }
      ]
    },
    plugins: [
      new VueLoaderPlugin(),
      new MiniCssExtractPlugin({
        filename: "css/vueExtract.css"
      })
    ]
  }
}

参考

MiniCssExtractPlugin#minimizing-for-production

Vueの単一ファイルコンポーネントで共通のSCSSをWebpackで読み込む

変数をまとめたファイルを毎回importするのが面倒なので、importせずに使えるように設定します。

使うモジュール

• sass-resources-loader

モジュールをインストールする

$ npm install --save-dev sass-resources-loader

const path = require("path"),
  webpack = require("webpack"),
  MiniCssExtractPlugin = require("mini-css-extract-plugin"),
  OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin")

module.exports = (env, argv) => {
  return {
    ...
    module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            MiniCssExtractPlugin.loader,
            {
              loader: "css-loader",
              options: {
                url: false,
                minimize: true,
                sourceMap: true
              }
            },
            {
              loader: "sass-loader",
              options: {
                sourceMap: true
              }
            },
            {
              loader: "sass-resources-loader",
              options: {
                resources: [path.resolve(__dirname, "./src/scss/_vars.scss")]
              }
            }
          ]
        }
      ]
    },
    plugins: [
      new VueLoaderPlugin(),
      new MiniCssExtractPlugin({
        filename: "css/vueExtract.css"
      })
    ]
  }
}

これで./src/scss/_vars.scssに記述した変数がimportなしで使うことができます。

参考

Vueで共通のSCSS(SASS)をwebpack(3系と4系)で読み込む方法
Vue.jsでSassを使う時にグローバル変数を読み込む方法