経緯

この度、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件

自己解決

以下の方法でうまく行きました。
まず、Monacaで「Onsen UI」を使用しないように、npm uninstall onsenui -Sを実行して「Onsen UI」を削除します。
そのあと、npm install node-sass --save-devを実行すると、エラーもなくインストールできました。
また、以前ご回答をいただいたように、「webpack.config.js」に、以下を追加します。

js
1	 {
2        test: /.scss$/,
3        use: [
4          'vue-style-loader',
5          'css-loader',
6          'sass-loader'
7        ]
8      }

この設定をしても、Monaca IDEのプレビューでは、なかなか前の画面から更新されなかったのですが、IDEの「プレビュー」でターミナルサーバーを更新（プレビュー右のメニューから）したら、問題なくトランスパイルされて表示されるようになりました。

まだ、テスト段階なので、これで正解かはわかりませんが、一度このトピックを閉じたいと思います。

投稿2019/09/25 09:18

tara-tail

総合スコア32

packege-lock.jsonにある以前の設定が悪さをしているかも知れません。package-lock.jsonを削除して、再度npm installしてみてください。

投稿2019/07/23 11:11

ttakatech

総合スコア118

tara-tail

2019/07/23 12:45

ttakatechさん、ご回答ありがとうございます。ご指示通り、packege-lock.jsonを削除し、`nmp install`を試しましたが、プレビューには何も表示されないままで、Sassも反映されていないようでした。また、ターミナルにエラーが表示されましたので、そのメッセージを追記しました。