【Gatsby.js】Sass + autoprefixerを導入する
Gatsby.jsで作ったサイトのスタイリングをSassで行い、autoprefixerを使いたい場合の設定をまとめます。
Sassを導入
$ yarn add gatsby-plugin-sass
module.exports = {
plugins: [
`gatsby-plugin-sass`,
],
}
$ mkdir src/scss
$ touch src/scss/style.scss
.title {
font-size: 32px;
}
$ touch src/components/layout.js
import React from "react"
import "../scss/style.scss"
export default ({ children }) => <>{children}</>
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に設定を書いて調整。
{
"devDependencies": {
"some-package-hogehoge": "1.0.0"
},
"browserslist": [
"last 2 versions",
"ie 9"
],
}
動作確認
gatsby-buildを叩き、publicディレクトリに出力されるcssファイルにベンダープレフィックスが増えて(/減って)いれば成功。
参考
Author And Source
この問題について(【Gatsby.js】Sass + autoprefixerを導入する), 我々は、より多くの情報をここで見つけました https://qiita.com/d0ne1s/items/d069939e454c37712394著者帰属：元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .