MonacaのVueフレームワークでSassを使用したい

前提・実現したいこと

Monaca IDEの「Onsen UI V2 Vue Navigation」テンプレートを使用してアプリを作成しています。Sassを導入したいと思っていますが、うまくいきません。

発生している問題・エラーメッセージ

<style>にlang="sass"またはlang="scss"を指定しましたが、これを指定しただけではトランスパイルが実行されていないようでした。

該当のソースコード

Page1.vueファイル内

vue
1<style lang="scss">
2.aaa {
3  color: red;
4  .bbb {
5    background-color: blue;
6  }
7}
8</style>

試したこと

Monaca IDEのターミナルから、npm install sass-loader node-sass --save-devを実行し、「node_modules」フォルダの中に「node-sass」と「sass-loader」がインストールされていることを確認しています。

「webpack.config.js」内に設定を追加するのではないかと調べていますが、具体的な指定の仕方がわかっていません。

補足情報（FW/ツールのバージョンなど）

Vueテンプレート：Onsen UI V2 Vue Navigationを使用して、「src」直下の「Page1.vue」などに、直接スタイルを書いています。

行動規範の内容に同意します

回答1件

ベストアンサー

記載されているように試してみた限り

webpack.config.js(一部抜粋)

JavaScript
1      {
2        test: /.json$/,
3        loader: 'json'
4      },
5      {
6        test: /.scss$/,
7        use: [
8          'vue-style-loader',
9          'css-loader',
10          'sass-loader'
11        ]
12      }
13    ]

のようにscss部分追加すればうまく行けました

※Page1.vueファイル

vue
1<template>
2  <v-ons-page>
3    <custom-toolbar>Page 1</custom-toolbar>
4    <p style="text-align: center">
5      This is the first page
6      <v-ons-button @click="push">Push Page 2</v-ons-button>
7    </p>
8    <div class="aaa">
9      <div class="bbb">
10        footer
11      </div>
12        footer２
13    </div>
14  </v-ons-page>
15</template>
16
17<style lang="scss">
18.aaa {
19  color: red;
20  .bbb {
21    background-color: blue;
22  }
23}
24</style>
25
26<script>
27  import customToolbar from './CustomToolbar';
28  import page2 from './Page2';
29  export default {
30     methods: {
31       pop(){
32         this.pageStack.pop();
33       },
34       push() {
35         this.pageStack.push(page2);
36       }
37     },
38     props: ['pageStack'],
39     components: { customToolbar },
40     key: 'key_page1',
41  }
42</script>