nuxt7
nuxt7 copied to clipboard
nuxt-community
Can't import more than one CSS file
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>)
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.
