経緯
この度、monacaを使用して、Onsen UIを使用せず、VueおよびVue-routerのみでmonacaでアプリを作成しようとしています。
以前、Onsen UIを使用したVueのテンプレートでは、ターミナルからnode-sassおよびsass-loaderをインストールすることで、scss記法を使用することができていたのですが、今回、それが上手くいかなくなってしまいました。
試したこと
.vueファイルなどから、Onsen UIに関する記載をすべて削除し、ターミナルからnpm install vue-router
を実行し、Vue-routerをインストールしました。この状態で、アプリの作成に問題なく、画面遷移も動作します。
その後、Sassを導入しようと、npm install node-sass --save-dev
をターミナルから実行すると、エラーが出て一回ではうまくいかず、何回か実行することでようやくインストールされまました。
なお、sass-loader
は、一回でインストールできました。
また、以前の質問のご回答から「webpack.config.js」に、以下を追加しています。
js
1// webpack.config.js 2{ 3 test: /.scss$/, 4 use: [ 5 'vue-style-loader', 6 'css-loader', 7 'sass-loader' 8 ] 9}
起きている問題および質問
上記の環境で、以下に示した「App.vue」のコードにあるように、<style lang="scss">
と記載すると、monaca IDEのプレビューが真っ白になってしまい、端末にも変更が更新されなくなってしまいます。
Sassを導入しなければ(lang="scss"
を記載しなければ)、上記のような問題が起こりませんが、Sass(Scss)記法に慣れてしまった自分は、是非ともSassを使用したいと思っています。
どなたか、monacaでOnsen UIを使用せずに、VueでSass(Scss)を使用されている人がいましたら、助言をお願いしたいと思っています。
詳細なコード
vue
1// App.vue 2<template> 3 <div id="app"> 4 <nav> 5 <div> 6 <router-link to="/" exact>Home</router-link> 7 </div> 8 <div> 9 <router-link to="/product" exact>商品情報</router-link> 10 </div> 11 </nav> 12 <router-view /> 13 </div> 14</template> 15 16<style lang="scss"> 17 nav { 18 display: flex; 19 background-color: pink; 20 > div { 21 display: flex; 22 width: 100px; 23 margin: 0 12px; 24 background-color: yellow; 25 } 26 } 27</style>
js
1// master.js 2import Vue from 'vue'; 3import App from './App.vue'; 4import router from '@/router.js' 5 6Vue.config.productionTip = false 7 8new Vue({ 9 el: '#app', 10 router, // アプリケーションに登録 11 template:'<app></app>', 12 components: { App } 13});
js
1// router.js 2import Vue from 'vue' 3import VueRouter from 'vue-router' 4 5import Home from '@/views/Home' 6import Product from '@/views/Product' 7 8Vue.use(VueRouter) 9 10const router = new VueRouter({ 11 routes: [ 12 { path: '/', component: Home }, 13 { path: '/product', component: Product } 14 ] 15}) 16 17export default router
vue
1// Home.vue 2<template> 3<div class="home"> 4 <h1>ホーム</h1> 5 </div> 6</template>
vue
1// Product.vue 2<template> 3 <div class="product"> 4 <h1>商品情報</h1> 5 </div> 6</template>
エラーメッセージ
抜粋になりますが、プレビューサーバーに以下のようなエラーメッセージが表示されました。
ERROR in ./src/App.vue?vue&type=style&index=0&lang=scss& (./node_modules/css-loader!./node_modules/vue-loader/lib/loaders/stylePostLoader.js!./node_modules/sass-loader/lib/loader.js!./nod e_modules/vue-loader/lib??vue-loader-options!./src/App.vue?vue&type=style&index=0&lang=scss&)Module build failed (from ./node_modules/sass-loader/lib/loader.js): Error: ENOENT: no such file or directory, scandir '/project/node_modules/node-sass/vendor'
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。