前提
ホームページ制作はCSSゲーであると感じたため、CSSをNuxtに導入しようと思った。
そのとき、結構忘れそうな内容だったため、メモる。
また、ここで初めてSCSSなる非常に革命的なものに出会ったため、その導入方法等も記載する。
SCSS導入方法
なんとNuxt.jsはSCSSをサポートしている
npm install sass sass-loader fibers
その後、nuxt.config.jsにて以下を書き込む
nuxt.config.js
const Sass = require('sass')
const Fiber = require('fibers')
export default {
// build.loaders のセクションに scss オプションを追加
build: {
loaders: {
scss: {
implementation: Sass,
sassOptions: {
fiber: Fiber
}
}
},
/*
** You can extend webpack config here
*/
extend (config, ctx) {
}
}
}
これでOK！ばり簡単
普遍的なCSSの場合
ディレクトリ構造
assets/styles(またはcss)/common.css
nuxt.config.js
nuxt.config.jsのcss:[]内に以下を記述する
nuxt.config.js
export default {
// ...
/*
** Global CSS
*/
css: [
"~assets/styles/common.css"
],
// ...
}
これで適用されるはず
SCSSで書きたいとき
assets/scss/common.scssを作成
nuxt.config.jsに記入したパスもこれに変更することを忘れてはいけない
個別のCSSの場合
Vueファイルの<style>に直接書き込むだけ。
めっちゃ便利
ただし、ページ遷移後にもサイト全体に適用されるため、（Nuxtぽい笑）
<style>を<style scoped>と表記すればいいようだ。
SCSSの場合
同様に
pages/index.vue
<style lang="scss" scoped>
$color: red;
p{
color: $color;
}
</style>
とすると良いようだ。
またここがすごいところで
SCSSのimport構文でassets/scss/に作成したSCSSファイルからimportすることもできる
pages/index.vue
<style lang="scss" scoped>
@import "~assets/scss/mixins.scss"
p{
color: red;
}
</style>
mixinを共有できるのは非常によき
まとめ
意外と簡単だが～とか忘れそうなので気をつけます。