phonegap / phonegap-template-vue-f7-split-panel

A Split View PhoneGap template using Vue.js and Framework7 that degrades to a Panel View on smaller devices
Apache License 2.0
17 stars 10 forks source link

Add SASS/SCSS support #31

Closed lcaprini closed 6 years ago

lcaprini commented 6 years ago

Hi, if I try to add a main.scss file from main.js, I always have an error like:

This relative module was not found:

* ./main.scss in ./src/main.js

The same behaviour with SASS files.

I'm also trying to use SCSS inside the style tag in my VueJS components and pages. I've installed the sass-loader and the node-sass, but if I edits the style tag adding the lang="sass" and the . type="text/scss" attributes, I have the following error:

@media (min-width: 960px) {
                          ^
      Invalid CSS after "...width: 960px) {": expected "}", was "{"
      in /Users/lucacaprini/Development/Projects/CordovaF7Vue/src/app.vue (line 60, column 28)

 @ ./node_modules/vue-style-loader!./node_modules/css-loader?{"sourceMap":true}!./node_modules/vue-loader/
lib/style-compiler?{"vue":true,"id":"data-v-5ef48958","scoped":false,"hasInlineConfig":false}!./node_modul
es/sass-loader/lib/loader.js?{"indentedSyntax":true,"sourceMap":true}!./node_modules/vue-loader/lib/select
or.js?type=styles&index=0!./src/app.vue 4:14-383 13:3-17:5 14:22-391
 @ ./src/app.vue
 @ ./src/main.js
 @ multi (webpack)-dev-server/client?http://localhost:8080 webpack/hot/dev-server ./src/main.js

Can you help me to adding SCSS support in this template? Thanks

lcaprini commented 6 years ago

Add node-sass module resolve the problem. Thanks