3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

概要

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'
   }),
],

たったこれだけでホットリロード中の検知が可能になります。
※まだまだ初心者のため、 設定間違いや、処理に悪いところがあればコメントに頂ければと思います:bow_tone1:

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

3
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?