.vueで作成したコンポーネントを.jsに書き換えた際に、styleをどこに入れればいいか教えてください。

Question

普段iPadのTextasticというアプリでコードを書いていて、vuecliが入っていないのでプレビューできず、.vueで作っていた単一コンポートをjsに変更することにしました。

//App.vue
<template>
    <div>
        <span class="red">Red</span>
    </div>
</template>

<script>
// 省略
</script>

<style scoped>
  .red ｛ color: red; }
</style>

となっているものを

//App.js
const App = {
    template: '<div><span class="red">Red</span></div>
    <style scoped>.red ｛ color: red; }</style>',
}

に変更したのですが、template内に<style scoped></style>
をおいても反映されず、生成されたHTMLを確認すると、styleの部分が消えていました。

この場合styleはどこに配置してあげれば反映されるようになりますか？

よろしくお願いします。

Answer 1

scoped styleは、vue-cliが使っているvue-loaderという.vueファイルを読み込むモジュールの機能なので、それがないと同じ動作は実現しにくいと思います。

scopedである必要がないならば単にCSSファイルをHTMLから参照するようにするのがいいと思います。

CodeSanxboxのようなブラウザ上のエディターを使うのも手です(iPadでどれくらい使いやすいかはわからないですが)。CodeSanxboxはvue-cliプロジェクトに対応していますし、npm上のパッケージも自由に使えます。

Comments

[退会済みユーザー]

回答いただきありがとうございます！
vuecli同封のモジュールが必要なのですね！
CodeSanxboxでコーディングとビルドしてから本番に移してデプロイする形を取ろうと思います。