LoginSignup
44

More than 5 years have passed since last update.

Vue.jsでpug+Sassの環境設定(webpack)

Last updated at Posted at 2017-01-29

はじめに

Vue.jsでスッキリしたコードで書きたかったのでpugとSassを使えるように環境構築しました。
最近はHTMLやCSSは他の言語で記述してHTMLやCSSにトランスパイルする手法が増えてきていますが、Vue.jsと併用できるとのことだったのでやってみました。

  • html => pug(旧名:Jade)
  • css => scss

ちなみにJavaScriptはECMAScriptの最新仕様(babelでトランスパイル)で記述したりTypeScriptで記述する方法があります。
babelでの導入についてはnpmパッケージまとめ(BrowserSync+webpack+babel)をご覧ください。

※Vue.jsとwebpackには深く触れていないので他の記事を参考にしてください。

参考

Vue.jsの導入

必要なパッケージ

vue
vue-loader

webpackの設定

webpack.config.js
// ...(省略)...
  module: {
    loaders: [
      // ...(省略)...
      {
        test: /\.vue$/,
        loader: 'vue'
      }
    ]
  },
// ...(省略)...

pugの導入

必要なパッケージ

pug-html-loader
vue-html-loader
vue-loader
vue-template-compiler

webpackの設定

設定なくて動いた

vueファイル

app.vue
<template lang="pug">
  section.test
    .test-child テキスト
    .test-child
      | テキスト
    ul
      li: a(href="#") アンカーテキスト
</template>

注意事項

  • pug-loaderはバグがあって動かなかった
  • Reactと同じくDOMのトップレベル(上記だとsection.test)は複数記述できない
    • Reactと違ってdiv要素以外も許容されている模様

参考

Sassの導入

SassはSCSS記法とSASS記法がありますが、CSSの記述と近いSCSS記法で導入しました。

パッケージ

css-loader
node-sass
sass-loader
vue-style-loader

webpackの設定

webpack.config.js
// ...(省略)...
  module: {
    loaders: [
      // ...(省略)...
    ]
  },
  vue: {
    loaders: {
      scss: 'vue-style!css!sass'
    }
  },
// ...(省略)...

vueファイル

app.vue
<style lang="scss">
  .test {
    .test-child {
      // ...(省略)...
    }
  }
</style>

参考

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
44