Ownedmedia ウェブ制作に役立つコンテンツを発信中!

webpack 2021.06.27

webpackでStylelintが使える環境を構築してみる

Tags: ,,,,

今回はwebpackでStylelintを導入する方法についてまとめていきたいと思います。StylelintとはCSSにおけるエラーの検知やコーディングルールの統一のために使われるツールで、設定したルールに基づきチェックしてくれるツールになります。webpackではSassのコンパイル時に合わせてStylelintを使えるようにしていきます。

 

webpackにおいてStylelintを使う上でTypeScriptやJavaScriptをバンドルする作業が必要になります。過去記事ではwebpackでTypeScriptのコンパイルやBabelを使ったJavaScriptのトランスパイルに関する記事をまとめており、今回はそれを準備している前提で進めていますので、下記のリンクからご参考ください。また、SassやCSSを扱うため「webpackでSassのコンパイル環境の作成と外部CSSへの書き出しをできるようにする」合わせて「webpackでPostCSSを使ったベンダープレフィックスの追加やCSSのminifyを行う」の記事でまとめている内容を構築している前提で今回は進めていきます。

【参考記事】

webpackでTypeScriptの自動コンパイル環境を作成してみる
webpackでBabelを使ったJavaScriptトランスパイルの環境構築

 

それではまず必要なパッケージをインストールしていきます。下記のようにコマンドを実行していきます。まずは「stylelint」本体に、Stylelintをwebpackで使う際に必要となる「stylelint-webpack-plugin」を、そしてSassのシンタックスに対応させるための「stylelint-scss」のパッケージをインストールします。

$ npm install --save-dev stylelint stylelint-scss stylelint-webpack-plugin

 

インストールが完了するとpackage.jsonにパッケージが追加されているのが確認できます。これで準備は完了ですので、引き続きwebpackの設定を行なっていきます。

【package.json】

{
  .......
  "devDependencies": {
    .......
    "stylelint": "^13.13.1",
    "stylelint-scss": "^3.19.0",
    "stylelint-webpack-plugin": "^2.1.1",
    .......
  },
  .......
}

 

Stylelintを使う際には、Stylelintの設定ファイルである「.stylelintrc.json」が必要になります。この設定ファイルのフォーマットですが、json以外でもJavaScriptでオブジェクトとして記述する形でもいいですし、YAML形式でも使えるそうです。今回はこのような構成で、.stylelintrc.jsonをルートディレクトリ直下に配置しておきます。

node_modules
dist
  ┣(main.js)
  ┗(main.css)
src
  ┣ main.ts
  ┗ main.scss
.stylelintrc.json
webpack.config.js
tsconfig.json

 

それでは引き続きwebpackの設定をしていきます。ここでは過去記事「webpackでSassのコンパイル環境の作成と外部CSSへの書き出しをできるようにする」合わせて「webpackでPostCSSを使ったベンダープレフィックスの追加やCSSのminifyを行う」で作成しているものをベースにStylelintを使えるように追記しています。まずは、stylelint-webpack-pluginを読み込んでいきます。そして、プラグインの設定で設定ファイルのパスを指定していきます。基本的にはこれだけでOKです。

【webpack.config.js】

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const StylelintPlugin = require('stylelint-webpack-plugin');
const cssInline = false;
if(cssInline) {
  styleLoader = 'style-loader';
} else {
  styleLoader = { loader: MiniCssExtractPlugin.loader };
}
module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: './src/main.ts',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'main.js'
  },
  module: {
    rules: [
      {
        test: /.ts$/,
        use: 'ts-loader'
      },
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              presets: [ '@babel/preset-env' ]
            }
          }
        ]
      },
      {
        test: /\.(sass|scss)$/,
        use: [
          styleLoader,
          {
            loader: 'css-loader',
            options: {
              url: false,
              sourceMap: true,
              importLoaders: 2
            }
          },
          {
            loader: 'postcss-loader',
            options: {
              postcssOptions: {
                plugins: [
                  [ 'autoprefixer', { grid: true } ],
                  [ 'cssnano', { preset: 'default' } ]
                ]
              },
            }
          },
          {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }
        ]
      }
    ]
  },
  resolve: {
    extensions: [ '.ts', '.js', '.json' ]
  },
  plugins: [
    new MiniCssExtractPlugin({ filename: 'main.min.css' }),
    new StylelintPlugin({ configFile: `${path.resolve(__dirname, '')/.stylelintrc.json`}),
  ]
}

 

引き続き、Stylelintの設定ファイルを作成していきます。今回はSassを使う前提となっているので「stylelint-scss」のプラグインを指定しておきます。そして「rules」で任意のルールを記述していきます。

【.stylelintrc.json】

{
  "plugins": [ "stylelint-scss" ],
  "rules": {
    "color-no-invalid-hex": true,
    "at-rule-no-unknown": null,
    "scss/at-rule-no-unknown": true,
    .....
  }
}

 

ルールは様々なものがありますが、いくつか例を挙げると下記のようなものがあります。必要なものを適宜追加していくような感じですが、たくさんあるので基本的なものや、よく使われるものをまとめたルールセットをモジュールとしてインストールする方法もあるようですね。

 

color-no-invalid-hex 16進数でのカラーコード指定をチェック
function-calc-no-invalid calc関数内にある式をチェック
unit-no-unknown 不明な単位が使われていないかのチェック
property-no-unknown 不明なプロパティが使われていないかのチェック
at-rule-no-unknown 不明な@ルールが使われていないかのチェック

 

その他のルールについて詳しくは公式のドキュメントを参考にしてみてください。

【List of rules】

https://stylelint.io/user-guide/rules/list/

 

これで設定ファイルの作成が完了したら、実際にコンパイルして確認してみます。そうすると下記のようにStylelintが働いてくれて、エラーを検知してくれるようになります。

ERROR in src/scss/foundation/_color.scss
48:15 ✖ Unexpected invalid hex color "#FF" color-no-invalid-hex

 

ちなみにSCSSではなくSASS記法を使った場合に「Please check validity of the block starting from line #*** CssSyntaxError」というエラーがなぜか出力されるようですが、調べてみるとどうやらバグのようで、現状は解決は難しいようですね。。SASS記法をよく使うので少し気になりますが、、

 


 

今回はwebpackでStylelintを導入する方法についてまとめてみました。コーディングの品質を保つためにもこのようなツールは必要になってくると思いますので、是非忘れずに導入しておきたいですね!

この記事を書いた人

オガワ シンヤ

合同会社デザインサプライ代表兼CEO / ディレクター・ウェブデザイナー・フロントエンドエンジニアをやっています。「ウェブとデザインでヒト・モノ・サービスを繋げ新しい価値を生み出す」をコンセプトに日々奮闘中!制作中はチョコレートが欠かせない三十路Webクリエイター。

  • Twitter

コメントフォーム

記事に関するご質問やご意見などありましたら下記のコメントフォームよりお気軽に投稿ください。なおメールアドレスは公開されませんのでご安心ください。

内容に問題なければ、お名前・ハンドルネームとメールアドレスを入力いただき、下記の「コメントを送信」ボタンを押してください。

CAPTCHA


この記事もよく読まれています

Scroll to Top
ご質問・ご相談はありませんか ?