webpack + stylelint 핫 리로드시 stylelint를 실행합니다.

개요

webpack에서 핫 리로드 시 stylint을 실행하면 조기에 오류를 감지할 수 있습니다.

전제 조건

webpack 설정과 stylelint는 이미 설정된 가정입니다.

github

작동 확인된 리포지토리
htps : // 기주 b. 코 m / 타쿠 야타 니구치 / s들 c에서 ゔ ぉ p

절차

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

단지 이것만으로 핫 리로드중의 검출이 가능하게 됩니다.
※ 아직 초보자이기 때문에 설정 실수 나 처리에 나쁜 곳이 있으면 코멘트를받을 수 있다고 생각합니다.

참고 자료:
htps : // 기 st. 기주 b. 이 m / 마나 vse h는 l / 69c2에 0f0083df14010 아 638187654378에