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.

Sign up for GitHub

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

Jump to bottom

PostCSS setup: PreCSS for PostCSS not working #593

Closed
agepoor opened this issue Jan 20, 2018 · 3 comments
Closed

PostCSS setup: PreCSS for PostCSS not working #593

agepoor opened this issue Jan 20, 2018 · 3 comments
Labels
🐛 Bug

Comments

@agepoor
Copy link

agepoor commented Jan 20, 2018 •
edited
Loading

Intro

I'm new to Parcel, and I was trying to convert a simple existing Gulp project to a Parcel project. I'm not sure how to set up the PostCSS configurations though. I use PreCSS instead of Sass for variables with a '$' and some other functions. While the output gives no error it does not transform my variables, so the CSS won't work. What am I doing wrong here? How do I set up a transformation that will use the PreCSS plugin before the rest?

It's a bit similar to this problem, only with PreCSS instead of CSSNext .

🎛 Configuration

./.postcssrc

{
  "modules": false,
  "plugins": {
    "precss": {}, // Sass-like markup for PostCSS
    "autoprefixer": { "browsers": ["last 1 version"] },
/*     "postcss-calc": {}, // Reduces calc() in CSS by calculating values */
    "postcss-safe-important": {},
    "postcss-discard-comments": {}
  }
}

./index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Test page</title>
  <link rel="stylesheet" href="./src/style.css">
</head>
<body>
</body>
</html>

./src/style.css

@import "./variables.css";
@import "./styles.css";
@agepoor agepoor changed the title Questions about PostCSS setup: PreCSS for PostCSS not working PostCSS setup: PreCSS for PostCSS not working Jan 20, 2018
@jonmilner jonmilner mentioned this issue Jan 21, 2018
Closed
@olivoil
Copy link

olivoil commented Feb 5, 2018

I have PreCSS working by using postcss.config.js and the variables option. I haven't tried with .postcssrc but I assume it should work. One thing I've noticed is that if postcss has an error in the configuration and does not run properly, parcel will just silently ignore it.

@olivoil olivoil mentioned this issue Feb 5, 2018
Closed
@agepoor
Copy link
Author

agepoor commented Feb 6, 2018

I can make it work, but postcss transforms files before it imports them, so variables and functions that need to work across different files don't compile like they should.

@jssee jssee mentioned this issue Apr 10, 2018
Closed
@DeMoorJasper
Copy link
Member

Not sure if this has been resolvedm but there are a couple issues that describe issues with config. Gonna close this due to inactivity and duplicates

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
🐛 Bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@olivoil @DeMoorJasper @agepoor