LoginSignup
1

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-10-01

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ファイルにベンダープレフィックスが増えて(/減って)いれば成功。

参考

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1