SassからPostCSSへ移行（Vue.js）

現在

今Sassでスタイルを書いてますが、今後はPostCSSへの移行も検討するかなと思い、
簡単に移行方法をまとめました。

<style lang="sass" src="./sample.scss"></style>

変更後

lang="sass"を消します。

<style src="./sample.scss"></style>

移行を最小限にするため、一旦Sassライクに書けるprecssを使います。

$ yarn add precss --dev

vue-loaderのオプションでprecssを読み込みます。

webpack.config.js

module: {
  rules: [
    {
      test: /\.vue$/,
      use: [{
        loader: 'vue-loader',
        options: {
          postcss: [
            require('precss')()
          ]
        }
      }]
    }
  ]
}

これでオッケーです

precssを使ってしまうとSassのままで良いじゃんと思ってしまいますが、
PostCSSを使うと、速度アップやカスタマイズによる効率化も期待できるみたいなので、検討してみるのも良いのではないでしょうか。

おまけ

CSSのLint設定をPostCSSのstylelintを使って設定してみます。

$ yarn add stylelint --dev
$ yarn add stylelint-config-standard --dev
$ yarn add stylelint-webpack-plugin --dev

webpack.configに以下を設定します。

webpack.config.js

const StyleLint = require('stylelint-webpack-plugin')

module: {
  rules: [
    {
      test: /\.vue$/,
      use: [{
        loader: 'vue-loader',
        options: {
          postcss: [
            require('precss')(),
            require('stylelint')()
          ]
        }
      }]
    }
  ],
  plugins: [
    new StyleLint()
  ],
}

.stylelintrcを用意して下さい。
ESLintなどを使ってる方は馴染みがあると思いますが、こちらでLintのルールを設定します。
今はどうゆうルールにするか考えてないので、一旦以下にしておきます。

.stylelintrc

{
  "extends": "stylelint-config-standard",
  "rules": {
  }
}

以上で設定は完了です。
例えば、以下のようなインデントがおかしいスタイルを書いたりすると、、

sample.scss

.sample {
    width: 100%;  // インデントがおかしい
}

webpackでビルドした時に、以下のようにコンソール上で指摘してくれます。

src/components/Sample/sample.scss
  2:5   ✖  Expected indentation of 2 spaces   indentation