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


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

# Vue.jsの単一ファイルコンポーネントのCSSをひとつのファイルにまとめてminifyする
Vueの単一ファイルコンポーネントに記述したcssを別ファイルで出力できるように設定します。
Webpackの[リファレンス](https://webpack.js.org/plugins/mini-css-extract-plugin/#minimizing-for-production)を参考に導入した。

## 使うモジュール
- [mini-css-extract-plugin](https://github.com/webpack-contrib/mini-css-extract-plugin)
- [optimize-css-assets-webpack-plugin](https://github.com/NMFR/optimize-css-assets-webpack-plugin)

## モジュールをインストールする
```bash
$ npm install --save-dev mini-css-extract-plugin optimize-css-assets-webpack-plugin
```

# 実装
```js
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](https://webpack.js.org/plugins/mini-css-extract-plugin/#minimizing-for-production)


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

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

## 使うモジュール
- [sass-resources-loader](https://github.com/shakacode/sass-resources-loader)

## モジュールをインストールする
```bash
$ npm install --save-dev sass-resources-loader
```


```js
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系)で読み込む方法](https://mk-engineer.com/vue-sass-global/)
[Vue.jsでSassを使う時にグローバル変数を読み込む方法 ](https://gootablog.com/vuejs-sass-globalvariables)