【Gatsby.js】Sass + autoprefixerを導入する

Gatsby.jsで作ったサイトのスタイリングをSassで行い、autoprefixerを使いたい場合の設定をまとめます。

Sassを導入

$ yarn add gatsby-plugin-sass

gatsby-config.js

module.exports = {
  plugins: [
    `gatsby-plugin-sass`,
  ],
}

$ mkdir src/scss
$ touch src/scss/style.scss

src/scss/style.scss

.title {
  font-size: 32px;
}

$ touch src/components/layout.js

src/components/layout.js

import React from "react"
import "../scss/style.scss"

export default ({ children }) => <>{children}</>

src/pages/index.js

import React from "react"
import Layout from "../components/layout"

export default () => (
  <Layout>
    <div>
      <h2 class='title'>トップページ</h2>
    </div>
  </Layout>
)

autoprefixerを導入

いろいろ調べたところ、gatsbyにはautoprefixerが組み込まれていることがわかりました。(これを知るのに時間かかった、、)

We have autoprefixer in gatsby core (which gatsby-plugin-sass uses as we pass some prebundled rules to plugins)

[gatsby-plugin-sass] prefix missing in css · Issue #15509 · gatsbyjs/gatsby

ただデフォルトの対象ブラウザが['>0.25%', 'not dead']になっているので、必要に応じてpackege.jsonに設定を書いて調整。

package.json

{
  "devDependencies": {
    "some-package-hogehoge": "1.0.0"
  },
  "browserslist": [
    "last 2 versions",
    "ie 9"
  ],
}

動作確認

gatsby-buildを叩き、publicディレクトリに出力されるcssファイルにベンダープレフィックスが増えて(/減って)いれば成功。

参考

• [gatsby-plugin-sass] prefix missing in css · Issue #15509 · gatsbyjs/gatsby
• Browser Support | Gatsby