Help us understand the problem. What is going on with this article?

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

概要

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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away