nuxt-community / nuxt7

📱 Full Featured iOS & Android PWA Apps with Nuxt.js and Framework7
https://nuxt7.netlify.com/
MIT License
325 stars 33 forks source link

Can't import more than one CSS file #94

Open heyfadii opened 4 years ago

heyfadii commented 4 years ago

When adding more than one CSS file to the nuxt.config.js file, building fails. A single css file works fine. I used the nuxt7 starter and my config file looks like this:

module.exports = {
  // Nuxt modules
  modules: [
    'nuxt7',
    '@nuxtjs/pwa'
  ],

  // PWA manifest
  // https://github.com/nuxt-community/pwa-module
  manifest: {
    name: 'nuxt7-app',
    description: ''
  },

  // Framework7 Config
  framework7: {
    // ...
  },

  // Build configuration
  build: {
    // Extract CSS in a separated file
    extractCSS: true,

    // You can extend webpack config here
    extend (config) {
      // ...
    }
  },

  // Additional CSS configuration
  css: [
    'assets/app.css',
    'assets/app2.css'
  ]
}

Building fails and I get this message:

 ERROR  Failed to compile with 1 errors                                                                                                                                    friendly-errors 01:37:26

 ERROR  in ./.nuxt/App.js                                                                                                                                                  friendly-errors 01:37:26

Syntax Error: Unexpected token, expected ";" (11:27)                                                                                                                       friendly-errors 01:37:26

   9 |
  10 | // User provided styles
> 11 | import '../assets/app.styl',import '../assets/app2.styl'
     |                            ^
  12 |
  13 | // Default layout
  14 | import defaultLayout from '../layouts/default.vue'
    at parser.next (<anonymous>)
    at normalizeFile.next (<anonymous>)
anilwarbhe commented 4 years ago

I am also receiving the same error. How can I resolve it?

anilwarbhe commented 4 years ago

Updated App.js

Replaced: <% css.map(c=>import '${relativeToBuild(resolvePath(c.src || c))}') %>

With:

<%
for (let i=0;i<css.length;i++){
%>
  import '<%= relativeToBuild(resolvePath(css[i].src || css[i])) %>';
<%
}
%>

And now it works.

sprabowo commented 4 years ago

Hi @fabu-gharbieh @anilwarbhe I think this issue has solved and merged

sprabowo commented 4 years ago

@pi0 please help to close this issue. Thanks