1
Help us understand the problem. What are the problem?

More than 1 year has passed since last update.

posted at

updated at

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

参考

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
1
Help us understand the problem. What are the problem?