webpack + stylelint ホットリロード時にstylelintを実行する。

3392 ワード
stylelint webpack webpack テキストリンク

概要

webpackでホットリロード時にstyelintを実行することで、早期にエラーを検知することが可能です。

前提条件

webpackの設定やstylelintはすでに設定済みの想定です。

github

動作確認済みのリポジトリ

https://github.com/TakuyaTaniguchi/staticDevelop

手順

npm-scripts

package.json
{
  "scripts": {
    "dev": "webpack-dev-server --mode development --watch"
  }
}

stylelint-webpack-pluginのインストール

yarn add stylelint-webpack-plugin --dev

webpack.config.jsに設定を追加

webpack.config.js
const StyleLintPlugin = require('stylelint-webpack-plugin');
const STYLELINT = ['./src/**.scss'];//検知対象ファイルの設定　カンマ区切りで検知対象を追加できる。
-~~~~~~~~~~~~~~
//pluginsに設定を追加
plugins: [
  new StyleLintPlugin({
      files: STYLELINT,
      syntax: 'scss'
   }),
],

たったこれだけでホットリロード中の検知が可能になります。

※まだまだ初心者のため、 設定間違いや、処理に悪いところがあればコメントに頂ければと思います

参考資料:
https://gist.github.com/manavsehgal/69c2e0f0083df14010a638187654378e