Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Allow option to suppress @import after other CSS warning #426

Closed
K3TH3R opened this issue Jul 6, 2020 · 1 comment
Closed

Allow option to suppress @import after other CSS warning #426

K3TH3R opened this issue Jul 6, 2020 · 1 comment

Comments

@K3TH3R
Copy link

K3TH3R commented Jul 6, 2020

I'm working on a new Nuxt.js website right now that uses @nuxtjs/style-resources to automatically inject a _variables.pcss file into each Vue component's <style> instance. This allows me to avoid doing this in every component:

<style type="postcss">
  @import '~/styles/_variables.pcss';

  /* actual component styles */
</style>

However, postcss-import is refusing to import anything in my global style file:

@import './lib/_variables.pcss';
@import './lib/_globals.pcss';
@import './lib/_type.pcss';

This is, essentially, because that style-resources plugin is automatically injecting the variables into the top of the file prior to the @import statements being processed.

My suggestion is to add a property to the options object like suppressWarning which is false by default and if true, allows us to bypass the warnings added in #240. I can put together a PR if this sounds like a reasonable idea.

@RyanZim
Copy link
Collaborator

RyanZim commented Jul 7, 2020

This isn't just a warning; postcss-import is unable to import your other files if there is CSS before the @import statement. What you want to do in your case is create a file that simply contains @import '_variables.pcss';, then have @nuxtjs/style-resources inline that file into your CSS, and let postcss-import do all the importing.

@RyanZim RyanZim closed this as completed Jul 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants