Nuxt.js: How to add separate CSS file to webpack config

Created on 30 Mar 2017  路  9Comments  路  Source: nuxt/nuxt.js

I wasn't sure whether to start a new issue, or post on a related issue such as https://github.com/nuxt/nuxt.js/issues/471 or https://github.com/nuxt/nuxt.js/issues/333.

Since they are both closed, I decided to go for the new one.

I want to load a single separate large css file for the entire site, that after the initial development won't change too often. It's too large for the new embedded css.

So, my question is, how can I add an additional stylesheet entry point to webconfig?

It doesn't need to do anything fancy, just go through a scss file and its imports and create an additional style sheet (minified in production, etc). Styles in components can use the embedded css.

I know how to do this in vanilla webconfig, but I haven't worked out how to do it in nuxt.config.js without messing with the existing entry points.

Any tips appreciated...

This feature request is available on Nuxt.js community (#c414)
available soon enhancement

Most helpful comment

This feature is coming back soon and can be enabled with build.extractCSS option :) e148e4b93abf2aecd9bcb53d7f626f07318d3b75 (Well this is much like vendor/common.css and minimal app.css for each page is being automatically inlined )

All 9 comments

Just to add, I am currently using the global CSS config option, which currently just adds it as embedded.

Ideally i'd like there to be a config option on that to specify output to a separate file.

@benosman Have you found any solution for this ?

@cretueusebiu not yet...

I'd like to see how this can happen as well, particularly a vendor.css and an app.css

This feature is coming back soon and can be enabled with build.extractCSS option :) e148e4b93abf2aecd9bcb53d7f626f07318d3b75 (Well this is much like vendor/common.css and minimal app.css for each page is being automatically inlined )

nice progress but it does not work with the scoped attribute. Setting scoped or scoped="true" does not yield expected results @pi0

Also, component styles are not prioritized.
Expected

component styles should overwrite former stylus

Current behavior

component styles are overwritten by former styles

This means setting the !important attribute a lot

Closing since rc3 is out :)

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

msudgh picture msudgh  路  3Comments

mikekidder picture mikekidder  路  3Comments

danieloprado picture danieloprado  路  3Comments

VincentLoy picture VincentLoy  路  3Comments

shyamchandranmec picture shyamchandranmec  路  3Comments